アイコン付きセレクトボックスを作る方法
セレクトボックスの左側へアイコンを表示する方法を紹介します。通常のセレクトボックスにアイコンを追加するだけで、何を選択するフォームなのかがひと目で分かりやすくなります。
カテゴリー選択や都道府県、配送方法、ユーザー情報など、入力内容を視覚的に伝えたい場面でよく利用されるデザインです。HTMLとCSSだけで実装できるため、JavaScriptを使わずに導入できます。
サンプルではアイコン付きセレクトボックスを複数用意し、それぞれ異なるアイコンを表示しています。アイコンは文字を使用しているため画像ファイルは不要で、そのままコピーして利用できます。
アイコンについて サンプルでは文字アイコンを使用しています。画像やSVGへ変更したい場合も同じ構成で利用できます。
デモ
コードをコピーして使おう！
<!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だけで構成されています。HTMLにはアイコン付きセレクトボックスの構造を記述し、CSSにはレイアウトやアイコンの配置、セレクトボックスのデザインを設定しています。JavaScriptを使用していないため、コピーしたコードを貼り付けるだけで利用できます。
アイコンはセレクトボックスの左側へ配置しており、画像を使用しなくても絵文字だけで分かりやすいフォームを作成できます。用途に応じてアイコンを変更するだけで、さまざまな入力フォームへ応用できます。
レスポンシブにも対応しているため、PC・タブレット・スマートフォンでもレイアウトを崩さず利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
アイコン付きセレクトボックスのHTMLを記述します。アイコン・ラベル・選択肢を変更する場合はこのファイルを編集します。
style.css
セレクトボックス全体のデザイン、アイコンの配置、角丸、余白、枠線、フォーカス時の装飾、レスポンシブ表示を設定します。
設置方法・使い方
sampleフォルダ内のindex.htmlをブラウザで開くと動作を確認できます。Webサイトへ設置する場合は、index.htmlとstyle.cssを同じフォルダへ配置してください。
カスタマイズできる内容
index.htmlではアイコン・ラベル・選択肢の内容を変更できます。style.cssでは背景色、文字色、枠線、角丸、余白、アイコン位置などを自由に調整できます。アイコンは絵文字だけでなく、画像やSVGへ変更することもできます。
数値調整
style.css内のpaddingを変更するとアイコンと文字の余白を調整できます。border-radiusを変更すると角丸の大きさが変わります。font-sizeを変更すると文字やアイコンの大きさを調整できます。transition:0.2s;はフォーカス時のアニメーション時間を表しており、値を大きくするとゆっくり、小さくすると速く変化します。
レスポンシブ対応
style.cssではwidth:100%、max-width、box-sizingを使用し、画面幅に応じて自動で縮小表示されます。また、640px以下ではpaddingや文字サイズを調整し、スマートフォン・タブレット・PCのいずれでも見やすく操作しやすいレイアウトになります。
コメント