如何删除 Firefox 选择框中所选项目周围的虚线轮廓？

在 Firefox 上驯服选择框中的虚线轮廓

自定义 Web 元素时，您可能会遇到令人厌烦的虚线轮廓，将所选项目包围在其中框，特别是在 Firefox 中。尝试使用 CSS 轮廓属性消除此轮廓通常是徒劳的。

解决方案

正如 Duopixel 恰当地建议的那样，关键在于针对 :-moz-focusring控制 Firefox 中虚线轮廓的伪元素。通过应用以下 CSS：

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

您可以使虚线轮廓不可见，留下干净整洁的选择框。

优化修复

为了防止可访问性问题，确保颜色透明并应用文本阴影以保持可读性至关重要。这些修改可确保在消除虚线轮廓时所选选项保持可见。

特殊注意事项

需要注意的是，此解决方案是专为 Firefox 量身定制的。在其他浏览器中，可以使用替代方法删除虚线轮廓。

以上是如何删除 Firefox 选择框中所选项目周围的虚线轮廓？的详细内容。更多信息请关注PHP中文网其他相关文章！