CSS のスタイル選択ドロップダウン

1. appearance:none を使用してデフォルトの矢印を非表示にし、CSS の select ドロップダウンでカスタム矢印を設定する
2. overflow:hidden を使用してデフォルトの矢印を非表示にし、CSS の select ドロップダウンでカスタム矢印を設定する

この記事では、CSS で選択ドロップダウンメニューのスタイルを設定するいくつかの方法を紹介します。

appearance:none を使用してデフォルトの矢印を非表示にし、CSS の select ドロップダウンでカスタム矢印を設定する

デフォルトの矢印セットを非表示にし、カスタムの矢印セットを追加することで、CSS のみを使用して選択ドロップダウンメニューのスタイルを設定できます。オペレーティングシステムに基づいて要素のスタイルを定義する CSS プロパティ appearance があります。appearance プロパティで適用されるスタイルは、プラットフォームネイティブになります。このプロパティを select タグで使用して、ドロップダウンメニューで矢印を定義できます。appearance プロパティの none オプションは、ドロップダウンからデフォルトの矢印を非表示にします。次に、カスタム矢印をアップロードできます。WebKit ベースおよび Blink ベースのブラウザーで -webkit-appearance および -moz-appearance プロパティを使用できます。

たとえば、HTML の select タグと option タグを使用してドロップダウンリストを作成します。お好みのオプションを書いてください。CSS で、select タグを選択し、margin、width、height、padding、font-size、border などのさまざまなプロパティを設定します。次に、appearance プロパティを使用して、none に設定します。次に、background 省略形プロパティを使用してカスタム矢印を設定します。url() 関数を使用して画像を選択します。background-repeat、background-size、background-color などのプロパティを使用して画像のスタイルを設定します。no-repeat オプションを使用して、画像を 1 回表示します。位置を 100%に設定し、background-size を 15%に設定します。

したがって、CSS を使用してドロップダウンメニューのスタイルを設定しました。

サンプルコード：

<select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
</select>

select {
 margin: 40px;
 width: 160px;
 padding: 4px 30px 4px 4px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 30px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}

overflow:hidden を使用してデフォルトの矢印を非表示にし、CSS の select ドロップダウンでカスタム矢印を設定する

select タグを div でラップし、その overflow を hidden に設定して、ドロップダウンメニューのデフォルトの矢印を非表示にすることができます。次に、最初の方法と同じように、カスタム矢印を追加できます。hidden に設定された overflow プロパティは、コンテナ内のオーバーフローをクリップします。残りのコンテンツは非表示になります。ドロップダウンメニューよりも小さい div の幅を定義します。そのため、overflow プロパティの hidden 値を使用すると、ドロップダウンメニューの矢印がコンテナの外に出ます。最後に、カスタム矢印を追加できます。

たとえば、クラス menu で div を作成します。div 内に、最初の方法と同じドロップダウン項目を記述します。CSS で、menu クラスの子孫である select タグを .menu select として選択し、スタイルを適用します。背景を透明に設定します。140px の width を作成します。font-size を 14px に設定し、境界線を作成します。メニューの高さを 35px に設定します。次に、menu クラスを選択し、40px のマージン、125px の幅、34px の高さを指定します。コンテナの幅がメニューよりも小さいことを確認してください。次に、オーバーフローを hidden に設定し、最初の方法として背景画像を設定します。

ここでは、ドロップダウンメニューのデフォルトの矢印を削除し、カスタムの矢印を追加しました。したがって、CSS で選択ドロップダウンメニューのスタイルを設定できます。

サンプルコード：

<div class="menu">
 <select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
 </select>
</div>

.menu select {
 background: transparent;
 width: 140px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 35px; 
} 
.menu{
 margin: 40px;
 width: 125px;
 height: 34px;
 border: 1px solid black;
 overflow: hidden;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}