WebKit で ::after を使用して選択ボックスのスタイルを設定するにはどうすればよいですか?-CSSチュートリアル-php.cn

How Can I Style a Select Box with ::after in WebKit?

スタイリッシュ WebKit の要素には独特の課題があります。開発者は、::after などの CSS 疑似要素を使用して外観を改善しようとすることがよくあります。ただし、特定のシナリオでは、問題の発生は避けられません。この難問を浮き彫りにする具体的なクエリを詳しく見てみましょう。

クエリ: のスタイルを設定することです。画像に依存せず、2 つの異なる部分からなるボックス。 HTML は簡単です:

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

ログイン後にコピー

次に、いくつかの CSS を紹介します:

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;
}

ログイン後にコピー

残念ながら、スタイルは期待どおりにレンダリングされません。この失敗に当惑した開発者は、W3C 仕様のガイダンスを求めましたが、結果は手ぶらでした。

答え: 潜在的な制限

観察によると、::after を追加すると問題があるようです。スタイル<選択>要素は現在 WebKit ではサポートされていません。この制限は、オペレーティングシステムがブラウザの制御をバイパスしてこれらの要素を生成する方法に起因すると考えられます。

結論として、