Firefox中的选择/选项html标签虚线轮廓问题答案

【问题标题】：select/option html tag dotted outline problem in firefoxFirefox中的选择/选项html标签虚线轮廓问题
【发布时间】：2011-07-08 17:48:10
【问题描述】：

button::-moz-focus-inner { border: 0; } 适用于按钮...

select/option html 标签呢？

但我提出了新问题，因为那里正在谈论按钮......

【问题讨论】：

如果您隐藏对焦环，非指针用户应该如何知道他们将要“点击”的位置？
它不一定是黑色虚线环，是吗？例如，它可以是不同的背景或不同的字体颜色。如果人们想搞乱强制默认值——他们可以找到一种方法来做到这一点（例如，使用 javascript 来模拟
@Quentin，如果没有这些内置（在我看来，丑陋的）样式，还有其他方法可以向用户显示焦点在哪里。用户可以轻松地将规则应用于:focus 和/或:active 伪类。
@Philip Walton — 有，但是有多少作者删除了默认设置，并在其位置上添加了其他内容？用户不能轻松应用他们自己的规则，大多数人甚至不知道他们可以。

【解决方案1】：

  select, option {
        border: 0 none;
        outline: 1px none;
    }

总是为我工作。

【讨论】：

【解决方案2】：

你试过了吗

select, option {outline:0}

【讨论】：

【解决方案3】：

从 Firefox 11.0 开始，选择、选项和按钮元素周围的虚线轮廓不再存在，据我在 Win7 with FF 11.0 和 Ubuntu 下执行的测试可知12.04 与 FF 12.0.

还注意到，像 Google 搜索结果分页编号这样的链接，在相同版本的 Firefox 中不会出现虚线轮廓。

似乎是 Mozilla Firefox 正在处理的问题。

制作这个Fiddle 来测试它！

【讨论】：

【解决方案4】：

select:-moz-focusring { color: transparent; }

这行得通。这很奇怪，因为您看到的元素是 :-moz-focusring，但即使您使用 outline 或 border 属性覆盖，虚线也不会消失。由于虚线颜色取决于select 的颜色，因此您可以使用此伪选择器放置透明颜色（并使其不可见），但在选择框文本中仍具有原始颜色。

【讨论】：

【解决方案5】：

试试这个：

选择，选项{ 边框：0 无；大纲：1px 无； }

【讨论】：