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

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