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

スタイリング CSS を使用した要素

JavaScript を使用してドロップダウンをカスタマイズするのとは対照的に、 のスタイルを直接設定することはできません。 内の要素ブラウザの互換性がないため、CSS のみを使用する要素。

ブラウザ間の互換性

IE9、Firefox、Chrome などのブラウザの場合、次の CSS プロパティで部分的なスタイルを提供できます。オプション:

• -webkit-Appearance: なし。 (WebKit ブラウザー)
• -moz-Appearance: なし。 (Firefox)
• 外観: なし。 (最新のブラウザ)

これらのプロパティはドロップダウンのデフォルトのスタイルを削除できますが、それ以上のカスタマイズは制限されています。

代替ソリューション

同様の外観を実現するには、 を変換するという回避策を使用できます。 HTML と CSS を使用してカスタム ドロップダウンに要素を追加します。

1. を作成します。要素を使用してドロップダウンを表します。
2. HTML を使用して
   • を含む要素ドロップダウン オプションのタグ。
   • を非表示にします。最初に表示を使用する要素: なし。 CSS プロパティ。
   • の上にカーソルを置くと、要素で、display: block; を設定して

     を表示します。要素を編集し、境界線、パディング、背景色のスタイルを追加します。
     • のスタイルを設定します。
       内の要素インタラクティブな効果のためのホバーとアクティブ状態を使用します。

     例

     <div>
       Select
       <ul>
         <li><a href="#">Item 1</a></li>
         <li><a href="#">Item 2</a></li>
         <li><a href="#">Item 3</a></li>
       </ul>
     </div>

     div { 
       margin: 10px;
       padding: 10px; 
       border: 2px solid purple; 
       width: 200px;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
     }
     div > ul { display: none; }
     div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
     div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
     div:hover > ul > li:hover { background: white;}
     div:hover > ul > li:hover > a { color: red; }