如何刪除 Firefox 選擇框中所選項目周圍的虛線輪廓？

在Firefox 上馴服選擇框中的虛線輪廓

自訂Web 元素時，您可能會遇到令人厭煩的虛線輪廓，將所選項目包圍在其中框，特別是在Firefox 中。嘗試使用 CSS 輪廓屬性消除此輪廓通常是徒勞無功的。

解決方案

正如 Duopixel 恰當地建議的那樣，關鍵在於針對 :-moz-focusring控制 Firefox 中虛線輪廓的偽元素。透過套用以下 CSS：

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

您可以讓虛線輪廓不可見，留下乾淨整潔的選擇框。

最佳化修復

為了防止可訪問性問題，確保顏色透明並應用文字陰影以保持可讀性至關重要。這些修改可確保在消除虛線輪廓時所選選項保持可見。

特殊注意事項

需要注意的是，此解決方案是專為 Firefox 量身定制的。在其他瀏覽器中，可以使用替代方法刪除虛線輪廓。

以上是如何刪除 Firefox 選擇框中所選項目周圍的虛線輪廓？的詳細內容。更多資訊請關注PHP中文網其他相關文章！