セレクトボックスの矢印アイコンを変更する方法
セレクトボックスの矢印アイコンを変更する方法を紹介します。このサンプルでは、ブラウザ標準の矢印を非表示にし、CSSで作成した独自の矢印をセレクトボックスの右側へ表示します。細いV字、太いV字、三角形、二重V字、丸囲みなど、複数のデザインを比較しながら確認できます。
CSSではappearance:noneを使って標準の矢印を非表示にし、枠線、背景色、::beforeや::afterなどの疑似要素を組み合わせて独自の矢印を作成します。矢印はセレクトボックスを囲む要素を基準に絶対配置するため、大きさ、太さ、色、形、右端からの位置などを用途やデザインに合わせて調整できます。
デモでは下部に用意した10種類の矢印をクリックすると、JavaScriptによって上部のセレクトボックスに表示される矢印がリアルタイムで切り替わります。各矢印は文字や画像を使用せずCSSだけで作成しているため、セレクトボックスのデザインに合わせて矢印の見た目をカスタマイズしたい場合にも利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
下の矢印をクリックすると、セレクトボックス右側のアイコンが切り替わります。
矢印は文字や画像を使わず、CSSの枠線・背景色・疑似要素だけで作成しています。
下部に表示されたCSS製の矢印をクリックすると、上部セレクトボックスの矢印アイコンがリアルタイムで切り替わります。
コードをコピーして使おう！
このサンプルは「HTML」「CSS」「矢印CSS」の3つを組み合わせて使用します。 まずHTMLとCSSをコピーし、そのあと下部から使用したい矢印を1つ選んでください。
- 「html」タブのコードをindex.htmlへコピーします。
- 「css」タブのコードをstyle.cssへコピーします。
- 下部の「使用する矢印CSSを選択」から、使用したい矢印を1つクリックします。
- 表示された矢印CSSをコピーし、style.cssの末尾へ追加します。
矢印CSSは10種類すべてを追加する必要はありません。使用したいデザインを1つだけ選んで追加してください。 矢印を変更する場合は、style.cssへ追加した矢印CSSを別のものへ置き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<meta charset="UTF-8">
<!-- スマートフォンやタブレットの画面幅へ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ブラウザのタブへ表示するページタイトル -->
<title>セレクトボックスの矢印アイコンを変更する方法</title>
<!-- セレクトボックスのデザインを設定するCSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- セレクトボックス表示エリア -->
<div class="custom-select-arrow">
<!-- タイトル -->
<div class="custom-select-arrow_title">
矢印アイコンを変更したセレクトボックス
</div>
<!-- 説明文 -->
<p class="custom-select-arrow_text">
ブラウザ標準の矢印を非表示にし、CSSで作成した独自の矢印を表示します。
</p>
<!-- セレクトボックスのラベル -->
<label
class="custom-select-arrow_label"
for="custom-select-arrow-prefecture">
都道府県
</label>
<!-- セレクトボックスと独自矢印を囲む要素 -->
<div class="custom-select-arrow_wrap">
<!-- セレクトボックス -->
<select
class="custom-select-arrow_select"
id="custom-select-arrow-prefecture"
name="prefecture">
<!-- 初期表示する項目 -->
<option value="">
選択してください
</option>
<!-- 選択肢 -->
<option value="hokkaido">
北海道
</option>
<option value="tokyo">
東京都
</option>
<option value="osaka">
大阪府
</option>
<option value="fukuoka">
福岡県
</option>
</select>
<!-- CSSで作成する独自矢印 -->
<span
class="custom-select-arrow_icon custom-select-arrow_icon--selected"
aria-hidden="true">
</span>
</div>
</div>
</body>
</html>使用したい矢印を1つクリックすると、下部へ対応するCSSが表示されます。 表示されたCSSをコピーし、上のcssタブからコピーしたコードの末尾へ追加してください。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではセレクトボックスと独自矢印を表示するspan要素を配置し、CSSではブラウザ標準の矢印を非表示にして、選択した矢印CSSを使って独自の矢印アイコンを表示します。JavaScriptや外部ライブラリは使用しないため、index.htmlとstyle.cssだけで動作します。
配布コードのCSSは、セレクトボックス本体や独自矢印の表示位置を設定する共通部分です。記事内の「使用する矢印CSSを選択」から使用したいデザインを1種類選び、表示された矢印CSSをstyle.cssの末尾へ追加して使用します。矢印CSSを変更するだけで、HTMLの構造を変更せずに矢印の形や色を変更できます。
サンプルでは都道府県を選択するセレクトボックスを使用しています。選択肢はindex.htmlのoption要素で変更でき、セレクトボックスの横幅、余白、枠線、角丸、文字サイズ、矢印の位置などはstyle.cssで調整できます。APIキーや外部サービスなど、利用者自身で取得する情報は必要ありません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは、セレクトボックスの表示内容を構成するファイルです。select要素の中に「選択してください」「北海道」「東京都」「大阪府」「福岡県」のoption要素を配置しています。選択肢を変更したい場合は、option要素の表示文字とvalueを編集します。
セレクトボックスの右側には、custom-select-arrow_iconとcustom-select-arrow_icon--selectedの2つのクラスを持つspan要素を配置しています。custom-select-arrow_iconは矢印の表示位置や大きさを設定する共通クラス、custom-select-arrow_icon--selectedは記事内から選択した矢印CSSを適用するためのクラスです。矢印のデザインを変更する場合でも、このHTMLのクラス名を変更する必要はありません。
style.cssは、ページ全体、セレクトボックス、独自矢印の表示エリアなどを設定するファイルです。appearance:noneと-webkit-appearance:noneでブラウザ標準の矢印を非表示にし、右側に独自矢印を配置できる領域を作っています。使用する矢印の形は、記事内から選択した矢印CSSをこのファイルの末尾へ追加して設定します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。index.htmlでは同じ階層にあるstyle.cssを読み込むため、2つのファイルは同じsampleフォルダ内へ配置してください。
次に、記事内の「使用する矢印CSSを選択」から使用したい矢印を1種類クリックします。「細いV字矢印」「太いV字矢印」「塗りつぶし三角形」「大きいV字矢印」「二重V字矢印」「丸囲みV字矢印」「四角囲みV字矢印」「横線付き矢印」「青い太線矢印」「赤い三角矢印」から選択できます。
矢印をクリックすると、そのデザインに対応したCSSが下部へ表示されます。「この矢印CSSをコピー」を押してCSSをコピーし、style.cssの末尾へ追加してください。10種類すべてのCSSを追加する必要はなく、使用したい矢印CSSを1種類だけ追加します。
CSSを追加したあと、sample/index.htmlをブラウザで開くと、ブラウザ標準の矢印の代わりに選択した独自矢印が表示されます。別の矢印へ変更する場合は、style.cssの末尾へ追加した矢印CSSを削除し、別の矢印CSSへ置き換えてください。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、ラベル、セレクトボックスの選択肢を変更できます。都道府県以外の用途で使用する場合は、label要素の文字、select要素のidとname、各option要素の表示文字とvalueを用途に合わせて編集できます。label要素のforとselect要素のidは同じ値になるように変更してください。
style.cssでは、セレクトボックス表示エリアの横幅、背景色、枠線、角丸、余白、文字サイズなどを変更できます。セレクトボックス本体についても、背景色、文字色、枠線、角丸、内側余白、フォーカス時の枠線などを変更できます。
矢印のデザインは、style.cssの末尾へ追加する.custom-select-arrow_icon--selectedのCSSで変更します。V字矢印ではwidthとheightで大きさ、border-rightとborder-bottomで線の太さや色を調整できます。三角形の矢印ではwidthとheightで大きさ、backgroundで色を変更できます。
数値調整
style.css
max-width:680px;
セレクトボックス表示エリアの最大横幅です。値を大きくすると表示エリアが横に広がり、小さくすると狭くなります。
margin:40px auto;
表示エリアの上下へ40pxの余白を設定し、左右を中央へ配置します。40pxを変更すると上下の間隔が変わります。
padding:32px;
表示エリアの内側余白です。値を大きくすると外枠と内容の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると角丸がなくなります。
font-size:28px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
padding:16px 60px 16px 16px;
セレクトボックス本体の内側余白です。上16px、右60px、下16px、左16pxを指定しています。右側の60pxは選択文字と独自矢印が重ならないように確保しているため、矢印を大きくした場合は必要に応じてこの値も調整します。
border:2px solid #cbd5e1;
セレクトボックス本体の枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:12px;
セレクトボックス本体の角丸です。値を大きくすると丸みが強くなります。
font-size:16px;
セレクトボックス内の文字サイズです。値を大きくすると選択項目の文字が大きくなります。
outline:3px solid rgba(37,99,235,0.18);
セレクトボックスへフォーカスしたときに表示する外枠です。3pxを変更すると外枠の太さが変わります。
outline-offset:2px;
フォーカス時の外枠とセレクトボックスとの間隔です。値を大きくすると外枠がセレクトボックスから離れます。
right:20px;
独自矢印をセレクトボックスの右端から20px離して配置します。値を大きくすると矢印が左へ移動し、小さくすると右端へ近づきます。
width:24px;・height:24px;
独自矢印を表示する共通領域の大きさです。値を変更すると矢印を配置できる領域の横幅と高さが変わります。
選択した矢印CSSにもwidth、height、borderなどの数値があります。たとえば細いV字矢印のwidth:10pxとheight:10pxを大きくすると矢印自体が大きくなり、border-right:2pxとborder-bottom:2pxの2pxを大きくすると線が太くなります。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。.custom-select-arrowへwidth:100%とmax-width:680pxを指定しているため、PCでは最大680pxで表示し、画面が狭くなると利用できる横幅に合わせて縮小します。
画面幅640px以下では@media screen and (max-width:640px)を使用し、bodyの余白を上下24px・左右12px、表示エリアの余白を上下24px・左右18pxへ縮小します。タイトルの文字サイズは28pxから24pxへ変更し、セレクトボックスの内側余白と独自矢印の右位置もスマートフォン向けに調整します。
これらの指定により、PC、タブレット、スマートフォンなど画面幅が異なる環境でもセレクトボックスを利用できます。
コメント