セレクトボックスで選択できない項目を設定する方法
セレクトボックスで選択できない項目を設定する方法を紹介します。このサンプルではHTMLとCSSだけを使用し、一部の選択肢だけを選択できない状態に設定する方法を実装しています。通常の選択肢はそのまま利用でき、指定した項目だけを選択不可にできるため、条件に応じた入力制御を簡単に実現できます。
例えば、受付を終了した日時や在庫切れの商品、利用できないプラン、対象外の地域などを一覧には表示したいものの、ユーザーには選択させたくない場合に便利です。お問い合わせフォームや予約システム、ECサイト、管理画面など、さまざまなWebページで活用できます。
選択できない項目はHTMLの属性を変更するだけで設定でき、選択肢の追加や削除、初期選択の変更も簡単に行えます。デザインはCSSから自由にカスタマイズできるため、実際のWebサイトにも導入しやすいシンプルなサンプルです。スマートフォン・タブレット・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="disabled-option-select-box">
<!-- タイトル -->
<div class="disabled-option-select-box_title">
配送エリアを選択
</div>
<!-- 説明文 -->
<p class="disabled-option-select-box_text">
「京都府」は選択できない項目として設定しています。
</p>
<!-- ラベル -->
<label class="disabled-option-select-box_label" for="area">
配送エリア
</label>
<!-- セレクトボックス全体 -->
<div class="disabled-option-select-box_wrap">
<!-- セレクトボックス -->
<select
id="area"
class="disabled-option-select-box_select">
<!-- 通常の選択項目 -->
<option selected>大阪府</option>
<!-- 選択できない項目 -->
<option disabled>京都府（受付停止中）</option>
<!-- 通常の選択項目 -->
<option>兵庫県</option>
<option>奈良県</option>
<option>滋賀県</option>
</select>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLファイルでセレクトボックスと各選択肢を配置し、選択させたくない項目へ属性を設定しています。CSSファイルでは、セレクトボックス全体のレイアウト、配色、余白、角丸、独自の矢印、フォーカス時の表示、選択できない項目の文字色と背景色を調整しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
タイトル、説明文、ラベル、セレクトボックス、配送エリアの選択肢を配置します。選択できない項目を変更する場合は、対象のoption要素へdisabled属性を付けます。通常の項目はそのまま選択でき、disabled属性を付けた項目だけ選択できない状態になります。
style.css
全体の最大横幅、背景色、枠線、文字サイズ、余白、角丸、独自矢印、フォーカス時の外枠、選択できない項目の配色、スマートフォン表示時の調整を設定します。
設置方法・使い方
index.htmlとstyle.cssを同じsampleフォルダ内へ配置します。sampleフォルダ内のindex.htmlをブラウザで開くと利用できます。セレクトボックスを開くと「京都府（受付停止中）」は一覧に表示されますが選択できず、それ以外の項目は通常どおり選択できます。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、ラベル、option要素の文字、選択肢の数、表示順、初期選択する項目を変更できます。選択禁止にする項目を変える場合は、現在「京都府（受付停止中）」に付いているdisabled属性を削除し、別の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でも画面幅に合わせて利用できます。
コメント