プレースホルダー付きセレクトボックスを作る方法
プレースホルダー付きセレクトボックスをHTMLとCSSだけで作る方法を紹介します。初期状態では「選択してください」などの案内文を表示し、ユーザーが項目を選択すると選択内容へ切り替わるシンプルなフォームです。JavaScriptを使用しないため、コピーしてすぐに利用できます。
都道府県や配送方法、支払い方法、プラン選択など、ユーザーへ入力を促したい場面でよく利用されます。初期状態の説明が表示されることで入力漏れを防ぎやすくなり、お問い合わせフォームや会員登録、ECサイトの注文画面など幅広いWebサイトで活用できます。
サンプルではHTMLとCSSのみで実装しており、プレースホルダーの文章や選択肢、文字サイズ、色、余白、角丸などを用途に合わせて自由に変更できます。スマートフォン・タブレット・PCでも利用しやすいレイアウトなので、さまざまなフォームへそのまま導入できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
初期状態では案内文を表示し、項目を選択すると選択した都道府県へ切り替わります。
初期状態では「選択してください」が表示されます。セレクトボックスを開いて項目を選択すると、選択した都道府県へ表示が切り替わります。
コードをコピーして使おう！
<!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-placeholder">
<!-- セレクトボックスエリアのタイトル -->
<div class="select-placeholder_title">
都道府県を選択
</div>
<!-- プレースホルダーの動作を案内する説明文 -->
<p class="select-placeholder_text">
初期状態では案内文を表示し、項目を選択すると選択した都道府県へ切り替わります。
</p>
<!-- セレクトボックスのラベル -->
<label
class="select-placeholder_label"
for="prefecture">
都道府県
</label>
<!-- セレクトボックスと独自矢印を囲む要素 -->
<div class="select-placeholder_select-wrap">
<!-- 都道府県を選択するセレクトボックス -->
<select
class="select-placeholder_select"
id="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>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSだけで構成されており、2ファイルだけで利用できます。JavaScriptや外部ライブラリは使用していないため、そのままブラウザで開くだけで動作を確認できます。カードデザインの中にセレクトボックスを配置し、設定画面やプラン選択画面などで見やすく表示できるレイアウトになっています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
カードデザインとセレクトボックスを配置しています。見出しやラベル、選択肢の内容を変更できます。
style.css
カードの背景色・枠線・角丸・影・余白・文字サイズ・セレクトボックスのデザインを管理しています。
設置方法・使い方
sampleフォルダをそのまま配置し、sample/index.htmlをブラウザで開くだけで利用できます。サーバー設定や追加ライブラリは不要です。
カスタマイズできる内容
index.htmlでは見出し・説明文・ラベル・option要素の内容を自由に変更できます。
style.cssではカードの背景色、枠線、角丸、影、余白、文字サイズ、セレクトボックスの色やサイズなどを変更できます。
数値調整
style.css
max-width:700px;
カード全体の最大横幅です。900pxにすると横幅が広くなり、500pxにするとコンパクトになります。
padding:32px;
カード内側の余白です。40pxにすると余裕のあるレイアウトになり、20pxにすると詰まった表示になります。
border-radius:18px;
カードの角丸です。30pxにすると丸みが強くなり、8pxにすると角ばったデザインになります。
box-shadow:0 16px 40px rgba(15,23,42,.08);
カードの影です。数値を大きくすると立体感が強くなり、削除するとフラットなデザインになります。
padding:16px 20px;
セレクトボックス内の余白です。上下左右の余白を変更すると入力欄の高さや横幅の印象が変わります。
レスポンシブ対応
style.cssのmax-widthやwidth:100%を使用しているため、画面幅に合わせてカードとセレクトボックスが自動で縮小されます。スマートフォン・タブレット・PCでもレイアウトが崩れず利用できます。
コメント