上下文
Firefox 14（和13）;在某些条件下忽略特定的CSS样式
问题
使用以下CSS：
*
{
outline:none;
-moz-outline:none;
-moz-user-focus:ignore;
}
Firefox 14（和13）在使用时忽略这些样式 标签 之间切换 select 元素。使用后单击这些元素 标签 仍显示轮廓。
笔记
select 代替 * 没有效果。select 元素。问题
这是一个错误还是预期的行为？
是否还需要使用其他CSS样式来防止轮廓无限期出现？
这是一个 已知的bug 这引发了几次Stackoverflow讨论。根据我的阅读，Mozilla认为CSS是处理这种元素行为的错误位置，而是选择通过其他方式处理它。此时唯一的解决方案是使用 tabindex="-1" 或者将元素设置为显示为其他内容，并重新设置下拉列表的外观 - 但要注意，这会打开一堆蠕虫本身。
如果您选择这样做，我过去已经成功获得以下kludge：
select {
appearance: normal;
-webkit-appearance: none;
-moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}
外观告诉浏览器将元素显示为其他内容，但这在供应商与供应商之间是不一致的。 appearance: normal; 是规范，而webkit替换正常，没有。 -moz-appearance: radio-container; 是我发现在所选择的选项中显示文本的唯一方法，同时删除完全自定义下拉列表的箭头铬。然而， 尝试尝试可用的选项 直到找到有效的东西，并且不添加您想要自定义的聚焦环。 Internet Explorer将需要更多的kludge来根据您的需要弯曲选择。完全可能，但超出了这个问题和答案的范围。
这是一个 已知的bug 这引发了几次Stackoverflow讨论。根据我的阅读，Mozilla认为CSS是处理这种元素行为的错误位置，而是选择通过其他方式处理它。此时唯一的解决方案是使用 tabindex="-1" 或者将元素设置为显示为其他内容，并重新设置下拉列表的外观 - 但要注意，这会打开一堆蠕虫本身。
如果您选择这样做，我过去已经成功获得以下kludge：
select {
appearance: normal;
-webkit-appearance: none;
-moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}
外观告诉浏览器将元素显示为其他内容，但这在供应商与供应商之间是不一致的。 appearance: normal; 是规范，而webkit替换正常，没有。 -moz-appearance: radio-container; 是我发现在所选择的选项中显示文本的唯一方法，同时删除完全自定义下拉列表的箭头铬。然而， 尝试尝试可用的选项 直到找到有效的东西，并且不添加您想要自定义的聚焦环。 Internet Explorer将需要更多的kludge来根据您的需要弯曲选择。完全可能，但超出了这个问题和答案的范围。
到目前为止，我发现克服它的唯一方法是设置 tabindex='-1' （看小提琴当然，这完全取出了元素 标签 选择链。这对用户界面来说并不好，我的猜测并不完全是你想要的（我假设你想保留 标签 可访问性，但只是做自己的样式突出显示）。
另一个解决方案是设置outline：none并设置box-shadow。例如：
.my_elements:focus
{
outline: none;
box-shadow: 0 0 3px 0px red;
}