输入字段 - 蓝色焦点突出显示？无法摆脱？

Question

我已经尝试了一切方法来消除这个焦点蓝色突出显示，但似乎完全没有效果。

我已经尝试过：

input:focus {
   outline: none; 
}

我在这里读到的是正确的解决方案。但它不起作用。使用最新的 Chrome / Safari / Firefox，当单击焦点时，蓝色突出显示仍然存在。

它在 IE7 / IE8 中运行得非常有趣。我尝试了一个在堆栈上读取的 JavaScript 解决方案，其中我向输入添加了一个 onclick:blur 方法，但这只是使输入字段不可编辑？

大家有什么解决办法吗？如果可能的话，更喜欢干净的 CSS 解决方案。

Answer 1

只有在没有更具体的内容的情况下，那段 css 才会起作用。请记住，CSS 遵循最具体的规则，因此

input#myid:focus {  /* <--more specific, takes priority */
    outline: blue;
}

input:focus {  /* <--less specific, overridden by above */
    outline: none;
}

您可以使用 !important 强制覆盖，尽管这可能会导致以后出现其他问题：

input:focus {
    outline: none !important;
}

使用 Firebug 查看元素的计算 CSS当它悬停时。它会告诉您应用于元素的规则来自哪里。

Answer 2

我遇到了同样的问题，这对我有用

#search input[type="text"]:focus {
width: 180px;
outline: none;
}