在 Firefox 中的 HTML 选择中删除焦点选项中的虚线边框/轮廓答案

【问题标题】：Remove dotted border/outline in focused option in HTML select in Firefox在 Firefox 中的 HTML 选择中删除焦点选项中的虚线边框/轮廓
【发布时间】：2021-01-11 14:04:31
【问题描述】：

我无法删除多尺寸选择中选定/聚焦选项周围的虚线边框/轮廓。它看起来像这样：

我已经尝试了几件事：

:focus {
    outline:none;
}

::-moz-focus-inner {
    border:0;
    outline: none; 
}
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

似乎都不起作用。这是 JSFiddle 链接：https://jsfiddle.net/esdgujft/

编辑：这仅出现在 Firefox 浏览器中-

【问题讨论】：

JSFiddle 中没有大纲。
这些点在 Firefox 中可见。在 Chrome 中没有大纲。

标签： css

【解决方案1】：

您可以更改select 的样式，但不能更改option 的样式，因为这取决于您使用的浏览器。

另请参阅： How to remove border of drop down list : CSS

这可能是一个解决方案，但它包含 javascript：

https://www.w3schools.com/howto/howto_custom_select.asp

【讨论】：

【解决方案2】：

在selects 中设置options 的样式仍然在 2020 年未得到广泛支持。如果幸运的话，您或许可以设置字体、颜色和背景颜色的样式，但仅此而已差不多吧。

至少在今天，大多数浏览器实际上自己绘制选择框。在网络的黑暗时代，大多数浏览器直接使用系统工具包来绘制这些。

如果您绝对必须解决这个 Firefox 绘制问题，我建议您构建一个实现选择客户端的 html/javascript 解决方案。大多数 UI 库都已内置此功能。

否则，我建议尽可能不要使用选择框。在可用性研究中已经注意到，选择框比简单的单选按钮（或多选的复选框）更容易让用户感到困惑。作为额外的效果，在表单域中组合在一起的单选按钮可以在浏览器中更好地设置样式。您甚至可以将它们设置为看起来像一个选择框。

例如，这个简单的代码几乎可以模仿一个选择，但具有更好的样式。不过，您可能需要添加一些键盘事件侦听器来启用键盘导航。

<formfield>
    <legend>Choose:</legend>
    <div class="select">
        <input type="radio" name="choice" value="choice-1" id="choice-1" checked/><label for="choice-1"  tabindex=3>Choice 1</label>
        <input type="radio" name="choice" value="choice-2" id="choice-2"><label for="choice-2" tabindex=3>Choice 2</label>
        <input type="radio" name="choice" value="choice-3" id="choice-3"><label for="choice-3" tabindex=3>Choice 3</label>
        <input type="radio" name="choice" value="choice-4" id="choice-4"><label for="choice-4" tabindex=3>Choice 4</label>
    </div>
</formfield>

<style type="text/css">
.select {
  display: flex;
  flex-direction: column;
  border: 1px solid #00000099;
  width: 200px;
}
.select label {
  padding-right: 0.5rem;
  padding-left: 0.25rem;
}
.select input[type=radio] {
  display: none;
}
.select input[type="radio"]:checked+label {
  background: lightblue;
}
</style>

但正如我之前所说，仅使用常规单选按钮可能更直观/用户友好。作为一般经验法则，它们比选择框具有更好的可供性。

【讨论】：