input边框点击后出现蓝色边框，outline:none无法生效

Question

<style type="text/css">

input:focus {outline:none}

</style>

Answer 1

看了一下 amazeUI 的输入框，发现这个蓝色边框不是 outline，而是自己模拟的 outline 效果。核心代码如下：

主要就是 box-shadow 和 border-color 的效果。用下面这样设置就可以：

input:focus{
    border-color:#333;   //设置为原来的颜色
    box-shadow:none;
}

Answer 2

蓝色边框不是focus造成的，去除box-shadow即可
<input style="border: none;box-shadow:none".....

Answer 3

input {outline:none}