CSS 疑似要素のスタイル設定が選択ボックスで機能しないのはなぜですか?

CSS を使用した選択要素のスタイル設定: 疑似要素を使用した選択ボックスの癖

WebKit で疑似要素を使用して選択ボックスのスタイルを設定しようとした場合Safari や Chrome などのブラウザでは、予期しない動作が発生する可能性があります。次のコードがなぜ望ましい効果をもたらさないのか疑問に思われるかもしれません:

<select name="selector">
  <option value="">Test</option>
</select>

select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select::after {
  content: " ";
  display: inline-block;
  width: 24px; height: 24px;
  background: blue;
}

この問題は、選択要素のレンダリングにおける OS の関与に起因します。 HTML 要素であるにもかかわらず、選択ボックスは通常、オペレーティング システムによってレンダリングされるため、カスタム スタイルの取り組みが妨げられる可能性があります。この制限は、WebKit ベースのブラウザと他の OS 依存のレンダリング エンジンの両方に影響します。

その結果、上記の例の :after セレクターなど、疑似要素を使用した選択要素のスタイル設定には、意図した効果が得られなかったり、システムが異なると一貫性のない動作をする可能性があります。

以上がCSS 疑似要素のスタイル設定が選択ボックスで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。