去除input标签focus时蓝色边框

去除标签focus时蓝色边框

问题:
当使用input标签时，它会有一个默认样式，即当其获取到焦点时，会有一个蓝色边框效果。如下图：
未获取焦点时：

获取到焦点时：

我们在控制台查看input:focus如下图。

发现并没有相关的样式。
事实上这是input的outline属性带来的问题。当我们加上

input  {
    outline:none;
}

就能解决这个问题。同样有这个问题的元素还有select,option,textarea。建议在项目开始时的样式初始化步骤中加入下面的代码。

input,select,option,textarea  {
    outline:none;
}