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

Posted 2023-03-06

【中文标题】Firefox中的选择/选项html标签虚线轮廓问题

【英文标题】：select/option html tag dotted outline problem in firefox

【发布时间】：2011-07-08 17:48:10

【问题描述】：

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

select/option html 标签呢？

我尝试了这里的一切： How to remove Firefox's dotted outline on BUTTONS as well as links?

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

【问题讨论】：

如果您隐藏对焦环，非指针用户应该如何知道他们将要“点击”的位置？

它不一定是黑色虚线环，是吗？例如，它可以是不同的背景或不同的字体颜色。如果人们想搞乱强制默认值——他们可以找到一种方法来做到这一点（例如，使用 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 的颜色，因此您可以使用此伪选择器放置透明颜色（并使其不可见），但在选择框文本中仍具有原始颜色。

【讨论】：

错误提示：它使标签在焦点上不可见。废话！

通过一些工作，这就是解决方案：***.com/a/18853002/1251219

使整个文本在我的 FF 25、windows 7 上消失

【参考方案5】：

试试这个：

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