关于input标签:focus更改样式的问题

css 专栏收录该内容
2 篇文章 0 订阅

input标签的border和outline

总觉得是一个自己踩了很多次的坑
若希望实现input在触发焦点时更改样式,通常会想到使用:focus选择器,但当使用border去更改样式时,会发现失效了:

input[type=text]:focus{ border: 1px solid #AFECAB; }

在这里插入图片描述
这里是希望改成浅绿色边框,发现不起作用,也无关层级,因为加了!important也没有作用,后来发现,在触发:focus时,用作突出的边框色,是由outline控制的,即获得焦点时,会被一个轮廓虚拟框围绕,而轮廓虚线框就是 outline。

input[type=text]:focus{ outline: 1px solid #AFECAB;}

在这里插入图片描述
将border改为outline,这样便能达到预想的效果了。
ps:当然,若你直接用js或jq的.focus去更改border的样式也是可以实现的。

  • 11
    点赞
  • 8
    评论
  • 27
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值