从FF中的选择框中删除轮廓答案

【问题标题】：Remove outline from select box in FF从FF中的选择框中删除轮廓
【发布时间】：2011-04-15 23:08:21
【问题描述】：

是否可以删除选择元素中所选项目周围的虚线？

我尝试在 CSS 中添加 outline 属性，但没有成功，至少在 FF 中没有。

<style>
   select { outline:none; }
</style>

更新
在继续删除大纲之前，请阅读此内容。
http://www.outlinenone.com/

【问题讨论】：

三个月前，我搜索了相同的内容，但使用了单选按钮。我发现了五六种不同的解决方案，但没有任何效果。所以我怀疑你不能这样做。我希望我错了。
恐怕事实也是如此，但仍然希望被证明是错误的：D
在 Mozilla 工作的人是否真的认为那条愚蠢的虚线看起来不错？为什么这甚至是我们必须删除的东西？
空
为了记录，这里没有一个答案可以解决它。 :P

标签： html css firefox xhtml

【解决方案1】：

一般来说，表单控件的样式不可能达到那种精确度。据我所知，没有浏览器支持所有控件中的合理范围的属性。这就是为什么有大量 JavaScript 库使用图像和其他 HTML 元素“伪造”表单控件并使用代码模拟其原始功能的原因：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

【讨论】：

谢谢，我想我必须“制作自己的”选择列表来完成此操作。太糟糕了，表单控件在不同浏览器中并不统一。
@Martin：这与文件上传控件的不灵活相比毫无意义，在大多数浏览器中根本无法设置样式。 ;)

【解决方案2】：

尝试以下方法之一：

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Reference

【讨论】：

感谢您的努力，但不幸的是它没有奏效。也许它适用于 a 元素，但它不适用于 select 元素。

【解决方案3】：

<select onchange="this.blur();">

如果你使用它，边框会一直保持，直到你从列表中选择一个项目。

【讨论】：

很遗憾，此解决方案不遵守可访问性和可用性准则。除了盲人用户的 TTS 界面外，它还不允许键盘导航。重点元素应该看起来与其他元素不同，当前问题的问题是 Firefox 不允许您决定如何。

【解决方案4】：

我找到了一个解决方案，但它是所有黑客之母，希望它可以作为其他更强大解决方案的起点。缺点（在我看来太大了）是任何不支持text-shadow 但支持rgba（IE 9）的浏览器都不会呈现文本，除非您使用诸如 Modernizr 之类的库（未经测试，只是一个理论）。

Firefox 使用文本颜色来确定虚线边框的颜色。所以说如果你这样做......

select {
  color: rgba(0,0,0,0);
}

Firefox 将使虚线边框透明。当然，您的文本也将是透明的！所以我们必须以某种方式显示文本。 text-shadow 来救援：

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

我们放置了一个没有偏移和模糊的文本阴影，以便替换文本。当然，旧版浏览器对此一无所知，因此我们必须为颜色提供后备：

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

这是 IE9 发挥作用的时候：它支持 rgba 但不支持 text-shadow，所以你会得到一个明显空的选择框。通过text-shadow 检测获取您的 Modernizr 版本并执行...

.no-textshadow select {
  color: #000;
}

享受吧。

【讨论】：

谢谢老哥，我会尽快试一试:)
唯一有效的解决方案（使用 FF 20）。恭喜！
这应该照顾每个 FF，而且只有 FF：@-moz-document url-prefix() { ::-moz-focus-inner {border: none} select:-moz-focusring { color: transparent; text-shadow: 0px 0px 0px #000; } }
会影响chrome等浏览器的css吗？

【解决方案5】：

嗯，Duopixel’s answer 非常完美。如果我们更进一步，我们可以让它防弹。

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

仅对 Firefox 有效，所选选项周围难看的虚线轮廓消失了。

【讨论】：

有趣的是，这个解决方案并不像 Duopixel 的答案那样万无一失。如果您在选择框上使用过渡效果（即 -moz-transition），则虚线框将在过渡期间出现，然后消失。因此，即如果您指定“-moz-transition: all 0.5s ease;”，您将在此解决方案中看到组合框半秒钟，而在 Duopixel 的答案中您根本看不到它。您可以通过将整个 select 元素设置为具有透明颜色属性来解决此问题，但是当框没有焦点时，您将根本看不到任何文本。
编辑：上面应该说，“......你会看到虚线框半秒钟用这个解决方案......”。我不能再编辑评论了。无论如何，'颜色：rgba（0,0,0,0）;'属性是修复过渡的东西，它必须在选择元素中； '-moz-focusring' 不行。同样有趣的是，由于某种原因，我在使用 Duopixel 的解决方案时在 IE9 和 Chrome 中都没有任何问题，所以他最后与 Modernizr 谈论的东西对我来说完全没有必要。
当然如果你指定一个过渡它就会出现。在过渡中使用all 就像用加特林机枪在飞行中射击。
这个或 Duopixel 的解决方案在 Mac Mavericks 的 FF 33.0.3 中不起作用。不是虚线轮廓，而是蓝色模糊轮廓。
这会破坏禁用选项上的浏览器样式 - 一旦选中，它们就会变成黑色，而不是它们应该是灰色的文本。

【解决方案6】：

解决办法来了

:focus {outline:none;}
::-moz-focus-inner {border:0;}

【讨论】：

经过测试。不工作。 Firefox 可以识别这个属性，但它似乎没有做任何事情。尝试将其设置为10px solid red，但我找不到它的显示位置。
当所有其他投票较高的答案都没有时，这实际上对我有用。

【解决方案7】：

这将针对所有 Firefox 版本

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

如果您打算让大纲出现在您网站上使用相同样式表的其他页面上，您可能需要删除 !important。

【讨论】：

这应该是选择的答案

【解决方案8】：

这里是解决 Firefox 选择框样式问题的协作解决方案。将此 CSS 选择器用作您通常的 CSS 重置的一部分。

类会根据问题删除轮廓，但也会删除任何背景图像（因为我通常使用自定义下拉箭头，而目前无法删除 Firefoxes 系统下拉箭头）。如果将背景图像用于下拉图像以外的任何内容，只需删除行 background-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

【讨论】：

是否仍然使用这种方法定义选项文本颜色？
实际上，您可以通过将供应商特定属性 -moz-appearance 设置为 none 来删除 SELECT 后台使用的 Firefox 箭头。
其他答案缺少重要的select::-moz-focus-inner 选择器，从而降低了它们的效率。这就是为什么这个得到我的⬆。
select:-moz-focusring 以及 color: transparent 和 text-shadow: 0 0 0 #000 删除了 Firefox v63 中令人讨厌的焦点边框
注意：url-prefix()。 fxsitecompat.dev/en-CA/docs/2018/…阅读链接我不清楚他们是否要逐步淘汰它。但请注意。

【解决方案9】：

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

工作 100%

【讨论】：

【解决方案10】：

这将从select 元素和outline 中移除焦点：

$("select").click(function(){
    $(this).blur();
});

虽然这在其他浏览器上并非没有缺点。您需要检查用户正在使用的浏览器：

if (FIREFOX) {
    //implement the code
}

【讨论】：

请说明您的代码 sn-p 除了提供代码 sn-p 之外还做了什么。
if (FIREFOX) { //implement the code } BAHAHAHA 谢谢你的笑声

【解决方案11】：

从 Firefox 所有可选标签中删除轮廓/虚线边框。

将这行代码放在你的样式表中：

*:focus{outline:none !important;}

【讨论】：

【解决方案12】：

在 CSS 中将 border-style: none 添加到您的选择中。

select {
border-style: none; }

【讨论】：

【解决方案13】：

步骤 1) 添加 HTML：添加您选择的选择选项并添加属性：contenteditable="true"

第 2 步）添加 CSS：使用 [attribute] 选择器选择所有内容可编辑的元素，并使用 outline 属性移除边框：

[contenteditable] {
  outline: 0px solid transparent;
}
select {
  border: none;
}

<select contenteditable="true">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

【讨论】：

【解决方案14】：

select:focus {
  box-shadow: none;
}

在选择/聚焦时移除选择框的轮廓。

【讨论】：

【解决方案15】：

https://ssiddique.info/projects/jqueryplugins/demo/index.php?demo=CheckboxStylized 看看这个从here下载插件

【讨论】：