Firefox の選択ボックスで選択した項目の周囲の点線の輪郭を削除するにはどうすればよいですか?

Firefox の選択ボックスの点線のアウトラインを調整する

Web 要素をカスタマイズしているときに、選択した項目を囲む不快な点線のアウトラインが表示されることがあります。特に Firefox のボックス。 CSS のアウトライン プロパティを使用してこのアウトラインを根絶しようとする試みは、多くの場合無駄であることがわかります。

解決策

Duopixel が適切に示唆しているように、鍵は :-moz-focusring をターゲットにすることにあります。 Firefox の点線のアウトラインを制御する疑似要素。次の CSS を適用すると、

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

点線のアウトラインを非表示にして、すっきりとした整然とした選択ボックスを残すことができます。

修正の最適化

アクセシビリティの問題を防ぐには、読みやすさを維持するために色が透明であり、テキストの影が適用されていることを確認することが重要です。これらの変更により、点線のアウトラインが削除されても、選択したオプションが表示されたままになります。

特別な考慮事項

このソリューションは Firefox 専用に調整されていることに注意することが重要です。他のブラウザでは、別の方法を使用して点線の輪郭を削除できます。

以上がFirefox の選択ボックスで選択した項目の周囲の点線の輪郭を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。