上下文
Firefox 14(和13);在某些条件下忽略特定的CSS样式
问题
使用以下CSS:
*
{
outline:none;
-moz-outline:none;
-moz-user-focus:ignore;
}
的jsfiddle
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;
}