アイコン付きセレクトボックスを作る方法
アイコン付きセレクトボックスを作る方法を紹介します。このサンプルでは、セレクトボックスの左側にアイコンを表示し、どの内容を選択する項目なのかを見た目で分かりやすくします。都道府県、配送方法、支払い方法など、複数の入力項目を並べるフォームでも内容を判別しやすくできます。
HTMLではセレクトボックスとアイコンを同じ要素内に配置し、CSSのposition:absoluteを使ってアイコンを左側へ重ねて表示します。セレクトボックスには左側の余白を広めに指定することで、アイコンと選択文字が重ならないように調整しています。また、appearance:noneを指定してブラウザ標準の見た目を整えています。
サンプルでは絵文字をアイコンとして使用していますが、表示する内容は文字、画像、SVGなどへ変更できます。JavaScriptを使用せず、HTMLと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="select-box-icon">
<!-- セレクトボックスエリアのタイトル -->
<div class="select-box-icon_title">
アイコン付きセレクトボックス
</div>
<!-- アイコンを表示する目的を案内する説明文 -->
<p class="select-box-icon_text">
アイコンを付けることで、選択する内容を分かりやすく表示できます。
</p>
<!-- 3つのセレクトボックスをまとめる一覧 -->
<div class="select-box-icon_group">
<!-- 都道府県を選択する項目 -->
<div class="select-box-icon_item">
<!-- 都道府県を表すアイコン -->
<span class="select-box-icon_symbol" aria-hidden="true">
📍
</span>
<!-- 都道府県を選択するセレクトボックス -->
<select
class="select-box-icon_select"
id="prefecture"
name="prefecture"
aria-label="都道府県を選択">
<!-- 初期表示する案内項目 -->
<option value="">都道府県を選択</option>
<!-- 都道府県の選択肢 -->
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="fukuoka">福岡県</option>
</select>
</div>
<!-- 配送方法を選択する項目 -->
<div class="select-box-icon_item">
<!-- 配送方法を表すアイコン -->
<span class="select-box-icon_symbol" aria-hidden="true">
🚚
</span>
<!-- 配送方法を選択するセレクトボックス -->
<select
class="select-box-icon_select"
id="delivery"
name="delivery"
aria-label="配送方法を選択">
<!-- 初期表示する案内項目 -->
<option value="">配送方法を選択</option>
<!-- 配送方法の選択肢 -->
<option value="home-delivery">宅配便</option>
<option value="mail">メール便</option>
<option value="store">店舗受け取り</option>
</select>
</div>
<!-- 支払い方法を選択する項目 -->
<div class="select-box-icon_item">
<!-- 支払い方法を表すアイコン -->
<span class="select-box-icon_symbol" aria-hidden="true">
💳
</span>
<!-- 支払い方法を選択するセレクトボックス -->
<select
class="select-box-icon_select"
id="payment"
name="payment"
aria-label="支払い方法を選択">
<!-- 初期表示する案内項目 -->
<option value="">支払い方法を選択</option>
<!-- 支払い方法の選択肢 -->
<option value="credit-card">クレジットカード</option>
<option value="bank">銀行振込</option>
<option value="cash-on-delivery">代金引換</option>
</select>
</div>
</div>
<!-- アイコンの変更方法を案内する補足文 -->
<p class="select-box-icon_note">
span要素内の絵文字を変更すると、用途に合ったアイコンへ変更できます。
</p>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは3つのselect要素を配置し、それぞれの左側に用途を表す絵文字アイコンを表示しています。CSSではアイコンをposition:absoluteでセレクトボックスの左側へ配置し、選択文字と重ならないように左側の余白を調整しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは、アイコン、セレクトボックス、選択肢などを構成するファイルです。サンプルでは都道府県に「📍」、配送方法に「🚚」、支払い方法に「💳」の絵文字を使用し、それぞれの内容を視覚的に判別しやすくしています。
アイコンはspan要素内へ直接記述しています。絵文字を変更する場合は、このspan要素内の「📍」「🚚」「💳」を用途に合ったものへ変更します。アイコンにはaria-hidden="true"を指定し、装飾用の要素として扱っています。
各select要素にはoption要素で選択肢を設定しています。表示する文字やvalueの値を変更することで、用途に合わせた内容へ変更できます。select要素のid、name、aria-labelも、実際に使用する項目に合わせて変更してください。
style.cssは、セレクトボックス全体のデザインとアイコンの配置を設定するファイルです。.select-box-icon_itemをアイコン配置の基準とし、.select-box-icon_symbolを絶対配置することで、セレクトボックスの左側へアイコンを重ねています。セレクトボックスには左側52pxの余白を設定し、アイコンと選択文字が重ならないようにしています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。index.htmlから同じ階層のstyle.cssを読み込む構成になっているため、2つのファイルを配置したあと、sample/index.htmlをブラウザで開くと表示を確認できます。
セレクトボックスをクリックすると、それぞれに設定した選択肢が表示されます。サンプルでは3つのセレクトボックスを縦に並べていますが、不要な項目は.select-box-icon_itemごと削除でき、同じ構造を追加すれば項目数を増やすこともできます。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、補足文、アイコン、セレクトボックスの選択肢を変更できます。アイコンとして使用している絵文字はspan要素内を書き換えるだけで変更できます。
選択肢を変更する場合は、各option要素の表示文字とvalueを用途に合わせて変更します。option要素を追加・削除すれば、選択肢の数も調整できます。
style.cssでは、全体の最大横幅、余白、枠線、角丸、背景色、アイコンの大きさや位置、セレクトボックスの余白、文字サイズ、フォーカス時の枠線や強調表示などを変更できます。
数値調整
style.css
max-width:760px;
セレクトボックス全体の最大横幅です。値を大きくすると表示領域が広がり、小さくすると狭くなります。
padding:32px;
セレクトボックス全体の内側余白です。値を大きくすると外枠と内容の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
セレクトボックス全体を囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると角丸がなくなります。
font-size:28px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
gap:18px;
3つのセレクトボックス同士の間隔です。値を大きくすると縦方向の間隔が広がり、小さくすると狭くなります。
left:16px;
アイコンをセレクトボックスの左端から16px離して配置します。値を大きくするとアイコンが右へ移動し、小さくすると左へ移動します。
width:24px;・height:24px;
アイコンを配置する領域の大きさです。値を大きくするとアイコン用の領域が広がり、小さくすると狭くなります。
font-size:20px;
絵文字アイコンの大きさです。値を大きくするとアイコンが大きくなり、小さくすると小さくなります。
padding:14px 18px 14px 52px;
セレクトボックスの内側余白です。上14px、右18px、下14px、左52pxを指定しています。左側の52pxはアイコンと選択文字が重ならないように確保しているため、アイコンの大きさや位置を変更する場合は、この値も合わせて調整します。
border:2px solid #cbd5e1;
セレクトボックスの枠線です。2pxを変更すると枠線の太さを調整できます。
border-radius:12px;
セレクトボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角い形になります。
font-size:16px;
セレクトボックス内の文字サイズです。値を大きくすると選択項目の文字が大きくなり、小さくすると小さくなります。
transition:border-color 0.2s,box-shadow 0.2s;
セレクトボックスへフォーカスしたときの枠線と影が切り替わる時間です。0.2秒を大きくすると変化がゆっくりになり、小さくすると速くなります。
box-shadow:0 0 0 4px rgba(37,99,235,0.15);
フォーカス時にセレクトボックスの外側へ表示する強調部分です。4pxを大きくすると強調される範囲が広がり、小さくすると狭くなります。
@media screen and (max-width:640px)
スマートフォン向けの表示へ切り替える画面幅です。640px以下になると、ページ全体やセレクトボックス全体の余白、タイトルの文字サイズ、セレクトボックスの左側余白、アイコンの位置を調整します。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。.select-box-iconにはwidth:100%とmax-width:760pxを指定しているため、最大760pxを保ちながら画面幅に合わせて縮小します。
画面幅640px以下ではメディアクエリを使用し、ページ全体の余白を上下24px・左右12px、セレクトボックス全体の余白を上下24px・左右18pxへ変更します。タイトルは28pxから24pxへ縮小し、セレクトボックスの左側余白を50px、アイコンの位置を左端から14pxへ調整することで、スマートフォンでもアイコンと選択文字が重ならないようにしています。
コメント