CSS のみを使用して「要素」の外観をスタイル設定するにはどうすればよいですか?

CSS を使用してスタイル付き選択範囲を選択する

を強化しようとしているとき::after 疑似要素を使用したスタイルを持つ要素で、ユーザーが予期しない問題に遭遇しました。望ましい結果は、画像を組み込むことなく選択ボックスを 2 つのセクションに分割することでした。次の HTML と CSS を定義したにもかかわらず:

<select name="">
  <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;
}

スタイルを実現できませんでした。 W3C 仕様を調査しても明確な点は得られませんでした。

アプローチの限界

慎重に分析した結果、指定された仕様を使用して現時点では望ましい効果を達成できないことが判明しました。本質的な制限による方法です。選択要素がブラウザの内部レンダリング エンジンではなく、特定のオペレーティング システムでレンダリングされる方法により、CSS を介して要素の外観や動作が変更されることが防止されます。

以上がCSS のみを使用して「要素」の外観をスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html select using internal issue

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS のみを使用してクロスブラウザーのスライドイン効果を作成するには?次の記事：CSS のみを使用してクロスブラウザーのスライドイン効果を作成するには?

関連記事

続きを見る

• CSSを書くときにBorderについて注意すべきことまとめ
• 複数のスタイル選択とスタイルのリアルタイム切り替えを実現する方法_体験交流
• マーキーの詳細な使用状況分析
• CSSタイトル行の実装（行削除効果による行削除）
• CSS3 におけるグレースフル デグラデーションとプログレッシブ エンハンスメントの違い

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved