選択済みのセレクトボックスを作る方法
選択済みのセレクトボックスを作る方法を紹介します。セレクトボックスは複数の選択肢から1つを選択するフォーム部品ですが、あらかじめ特定の項目を選択した状態で表示したいケースも多くあります。このサンプルではHTMLのselected属性を利用し、ページを開いた時点で指定した項目が選択された状態のセレクトボックスを作成します。
HTMLとCSSだけで実装できるため、JavaScriptを使わずに導入できます。お問い合わせ画面や会員登録画面、住所入力フォーム、ECサイトの配送地域選択など、初期値を設定したいフォームへそのまま活用できます。選択肢の内容や初期選択する項目も簡単に変更できるため、用途に合わせたカスタマイズも行いやすい構成です。
コードはシンプルな構成なので、セレクトボックスの基本的な使い方を学びたい方にもおすすめです。レスポンシブ対応のレイアウトになっているため、スマートフォン・タブレット・PCでも扱いやすく、実際のWebサイトや管理画面へ導入しやすいサンプルとして利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「東京都」が初期状態で選択されています。
ページを開いた時点で「東京都」が選択された状態になっています。別の項目を選択すると通常のセレクトボックスとして利用できます。
コードをコピーして使おう！
<!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="selected-select-box">
<!-- セレクトボックスエリアのタイトル -->
<div class="selected-select-box_title">
都道府県を選択
</div>
<!-- 初期選択されている内容を案内する説明文 -->
<p class="selected-select-box_text">
「東京都」が初期状態で選択されています。
</p>
<!-- セレクトボックスのラベル -->
<label class="selected-select-box_label" for="prefecture">
都道府県
</label>
<!-- セレクトボックスと独自矢印を囲む要素 -->
<div class="selected-select-box_wrap">
<!-- 都道府県を選択するセレクトボックス -->
<select
id="prefecture"
class="selected-select-box_select">
<!-- 北海道の選択肢 -->
<option value="hokkaido">
北海道
</option>
<!--
selected属性を付けたoptionが初期選択される
この例ではページを開いた時点で東京都が表示される
-->
<option value="tokyo" selected>
東京都
</option>
<!-- 大阪府の選択肢 -->
<option value="osaka">
大阪府
</option>
<!-- 福岡県の選択肢 -->
<option value="fukuoka">
福岡県
</option>
</select>
</div>
<!--
初期選択する項目を変更する場合は、
現在のselected属性を削除して別のoptionへ付ける
例：大阪府を初期選択する場合
<option value="tokyo">
東京都
</option>
<option value="osaka" selected>
大阪府
</option>
-->
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLファイルでセレクトボックスと選択肢を配置し、selected属性を使って「東京都」を初期選択しています。CSSファイルでは、全体のレイアウト、配色、余白、角丸、独自の矢印、フォーカス時の表示を設定しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
タイトル、説明文、ラベル、セレクトボックス、都道府県の選択肢を配置します。初期選択したいoption要素へselected属性を付けることで、ページを開いた時点で指定した項目を選択済みの状態にできます。
style.css
セレクトボックス全体の最大横幅、背景色、枠線、文字サイズ、余白、角丸、独自矢印、フォーカス時の外枠、スマートフォン表示時の調整を設定します。
設置方法・使い方
index.htmlとstyle.cssを同じsampleフォルダ内へ配置します。sampleフォルダ内のindex.htmlをブラウザで開くと、「東京都」が最初から選択されたセレクトボックスを確認できます。別の項目を選ぶと、通常のセレクトボックスとして選択内容を変更できます。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、ラベル、option要素の文字、value属性、選択肢の数、表示順を変更できます。初期選択する項目を変更する場合は、現在「東京都」に付いているselected属性を削除し、初期表示したい別のoption要素へ付け替えます。style.cssでは、背景色、枠線、文字色、文字サイズ、余白、角丸、最大横幅、独自矢印の位置や大きさを変更できます。
数値調整
max-width:680px;
680pxは全体の最大横幅です。値を大きくすると表示領域が広くなり、小さくするとコンパクトになります。
padding:36px;
36pxは全体の内側余白です。値を大きくすると内容と外枠の間隔が広くなります。
padding:16px 52px 16px 16px;
右側の52pxは、選択文字と独自矢印が重ならないように確保している余白です。値を大きくすると文字と矢印の間隔が広がります。
right:20px;
20pxは独自矢印を右端から離す距離です。値を大きくすると矢印が左へ移動し、小さくすると右端へ近付きます。
width:10px;
height:10px;
10pxは独自矢印の大きさです。値を大きくすると矢印も大きくなります。
border-radius:18px;
18pxは全体カードの角丸です。値を大きくすると丸みが強くなります。
border-radius:12px;
12pxはセレクトボックス本体の角丸です。値を変更すると入力欄の丸みが変わります。
font-size:30px;
30pxはタイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
font-size:16px;
16pxは説明文、ラベル、選択項目の文字サイズです。値を変更するとそれぞれの文字の大きさが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、box-sizing:border-boxを使用し、画面幅640px以下ではmedia queryによって全体の余白、タイトルサイズ、セレクトボックスの内側余白、矢印位置を調整しています。スマートフォン・タブレット・PCでも画面幅に合わせて利用できます。
コメント