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的样式也是可以实现的。