「選択してください」を初期表示するセレクトボックスの作り方
「選択してください」を初期表示するセレクトボックスの作り方を紹介します。このサンプルでは、セレクトボックスを開く前の初期状態に案内文を表示し、ユーザーが項目を選択すると、選択した内容へ表示が切り替わるセレクトボックスを作成します。
HTMLのselect要素には、input要素やtextarea要素のようなplaceholder属性はありません。そこで、最初のoption要素にselectedとdisabledを指定し、「選択してください」を初期状態だけに表示する案内用の選択肢として使用します。案内用の項目は選択できないため、実際に選択する項目と区別できます。
都道府県、カテゴリー、商品、問い合わせ内容など、複数の選択肢から1つを選んでもらうフォームに利用できます。HTMLでは初期表示する案内文や各選択肢を変更でき、CSSではセレクトボックスの横幅、余白、枠線、角丸、背景色、文字サイズなどを調整できます。JavaScriptを使用せず、HTMLとCSSだけで実装できるシンプルなサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
セレクトボックスから都道府県を1つ選択してください。
初期状態では「選択してください」が表示されます。項目を選択すると、選択した都道府県へ表示が切り替わります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<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-default-option_demo">
<!-- タイトル -->
<div class="select-default-option_demo_title">
都道府県を選択
</div>
<!-- 説明文 -->
<p class="select-default-option_demo_text">
セレクトボックスから都道府県を1つ選択してください。
</p>
<!-- ラベル -->
<label class="select-default-option_demo_label" for="select-default-option-prefecture">
都道府県
</label>
<!-- セレクトボックスと独自矢印を囲む要素 -->
<div class="select-default-option_demo_select-wrap">
<select
class="select-default-option_demo_select"
id="select-default-option-prefecture"
name="prefecture"
>
<!--
初期表示用の選択肢
selectedで最初に表示し、
disabledで選択できない項目にしています。
-->
<option value="" selected disabled>
選択してください
</option>
<!-- 選択肢 -->
<option value="hokkaido">
北海道
</option>
<option value="tokyo">
東京都
</option>
<option value="osaka">
大阪府
</option>
<option value="fukuoka">
福岡県
</option>
</select>
</div>
<!-- 補足説明 -->
<p class="select-default-option_demo_note">
初期状態では「選択してください」が表示されます。項目を選択すると、選択した都道府県へ表示が切り替わります。
</p>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではselect要素とoption要素を使用して選択肢を作成し、最初のoption要素へselectedとdisabledを指定することで、「選択してください」を初期状態に表示します。JavaScriptは使用していません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはセレクトボックスの内容を構成するファイルです。最初のoption要素にvalue=""、selected、disabledを指定し、「選択してください」を初期表示しています。selectedによってページを開いたときに最初から表示され、disabledによって通常の選択項目として選択できないようにしています。
その下に配置しているoption要素が実際に選択できる項目です。表示する文字とvalueの値を変更することで、用途に合わせた選択肢を設定できます。option要素を追加・削除すれば、選択肢の数も変更できます。
style.cssは表示エリアとセレクトボックスのデザインを設定するファイルです。横幅、余白、枠線、角丸、背景色、文字サイズなどを指定しています。また、ブラウザ標準の矢印をappearance:none;で非表示にし、疑似要素の::afterを使用して独自の下向き矢印を表示しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。index.htmlから同じ階層にあるstyle.cssを読み込む構成になっているため、2つのファイルを配置したあと、sample/index.htmlをブラウザで開くと動作を確認できます。
初期状態では「選択してください」がセレクトボックスに表示されます。セレクトボックスを開いて項目を選択すると、選択した内容へ表示が切り替わります。「選択してください」にはdisabledを指定しているため、選択後に通常の項目として選び直すことはできません。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、初期表示する案内文、各選択肢を変更できます。「選択してください」という文章も用途に合わせて「項目を選択してください」「カテゴリーを選択してください」などへ変更できます。
選択肢を変更する場合は、それぞれのoption要素の表示文字とvalueを変更します。たとえば<option value="item1">項目1</option>のように設定できます。選択肢を増やす場合はoption要素を追加し、減らす場合は不要なoption要素を削除します。
style.cssでは表示エリアの最大横幅、内側余白、枠線、角丸、背景色、タイトルの文字サイズ、セレクトボックスの余白、枠線、角丸、文字サイズ、フォーカス時の色、独自矢印の大きさや位置などを変更できます。
数値調整
style.css
max-width:680px;
セレクトボックス表示エリアの最大横幅です。値を大きくすると表示エリアが横に広がり、小さくすると狭くなります。
margin:40px auto;
表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって表示エリアを左右中央へ配置しています。
padding:36px;
表示エリアの内側余白です。値を大きくすると外枠と内容の間隔が広がり、小さくすると狭くなります。
border:1px solid #dbe5f1;
表示エリアの枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると角丸がなくなります。
font-size:30px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
margin:0 0 28px;
説明文の下側余白です。28pxを大きくすると説明文とラベルの間隔が広がり、小さくすると狭くなります。
margin-bottom:10px;
ラベルとセレクトボックスの間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
padding:16px 52px 16px 16px;
セレクトボックスの内側余白です。上16px、右52px、下16px、左16pxを指定しています。右側は独自矢印と文字が重ならないように広めの余白を確保しています。
border:2px solid #dbe5f1;
セレクトボックスの枠線です。2pxを変更すると枠線の太さを調整できます。
border-radius:12px;
セレクトボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角い形になります。
font-size:16px;
セレクトボックス内の文字サイズです。値を大きくすると選択項目の文字が大きくなり、小さくすると小さくなります。
right:20px;
独自矢印をセレクトボックスの右端から20px離して配置します。値を大きくすると矢印が左へ移動し、小さくすると右端へ近づきます。
width:10px;・height:10px;
独自矢印の大きさです。両方の値を大きくすると矢印が大きくなり、小さくすると小さくなります。
outline:3px solid rgba(37,99,235,0.18);
セレクトボックスへフォーカスしたときに表示するアウトラインです。3pxを変更するとアウトラインの太さを調整できます。
@media(max-width:640px)
スマートフォン向けの表示へ切り替える基準です。画面幅640px以下になると、表示エリアの余白、タイトルの文字サイズ、セレクトボックスの内側余白、独自矢印の位置を変更します。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。表示エリアにはwidth:100%とmax-width:680pxを指定しているため、最大680pxを保ちながら画面幅に合わせて縮小します。
また、画面幅640px以下では@media(max-width:640px)を使用し、表示エリアの内側余白を36pxから上下24px・左右18pxへ、タイトルの文字サイズを30pxから24pxへ変更しています。セレクトボックスの内側余白と独自矢印の位置も調整し、スマートフォンでも操作しやすい表示になるようにしています。
コメント