指定時間後に選択できなくなるセレクトボックスを作る方法
指定時間後に選択できなくなるセレクトボックスを作る方法を紹介します。このサンプルでは、ページを表示した直後は通常どおり選択肢を変更できますが、3秒が経過するとセレクトボックスが自動的に無効になり、それ以降は選択内容を変更できなくなります。HTML・CSS・JavaScriptのみで実装し、外部ライブラリは使用しません。
セレクトボックスが利用できる間は好きな項目を選択でき、3秒後になるとJavaScriptによってdisabled属性が設定されます。指定時間を過ぎたことが分かるように、セレクトボックスの下には「選択できなくなりました。」というメッセージも表示します。回答や設定を一定時間だけ変更できるフォーム、管理画面、会員サイトなど、操作できる時間を限定したい場面で利用できます。
タイトル、説明文、選択肢、無効化後のメッセージはHTMLから変更できます。CSSでは横幅、余白、背景色、枠線、角丸、文字サイズなどを調整でき、JavaScriptでは選択できなくなるまでの時間を変更できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
3秒以内に好きな項目を選択してください。
選択できなくなりました。
3秒以内は選択肢を変更できます。3秒が経過するとセレクトボックスが無効になり、選択できなくなります。「もう一度確認する」をクリックするとデモを最初から確認できます。
コードをコピーして使おう！
<!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="auto-disable-select_wrap">
<!-- タイトル -->
<div class="auto-disable-select_title">
3秒後に選択できなくなるセレクトボックス
</div>
<!-- 説明文 -->
<p class="auto-disable-select_text">
3秒以内に好きな項目を選択してください。
</p>
<!-- 入力項目 -->
<div class="auto-disable-select_group">
<!-- ラベル -->
<label
class="auto-disable-select_label"
for="auto-disable-select">
好きな色
</label>
<!-- セレクトボックス -->
<select
class="auto-disable-select_input"
id="auto-disable-select"
name="color">
<!-- 初期表示 -->
<option value="">
選択してください
</option>
<!-- 選択肢1 -->
<option value="red">
赤
</option>
<!-- 選択肢2 -->
<option value="blue">
青
</option>
<!-- 選択肢3 -->
<option value="green">
緑
</option>
</select>
<!-- 選択できなくなったことを知らせるメッセージ -->
<p
class="auto-disable-select_message"
id="auto-disable-select-message">
選択できなくなりました。
</p>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではタイトル、説明文、ラベル、選択肢、無効化後に表示するメッセージを作成します。CSSではセレクトボックス全体の横幅や余白、枠線、角丸、無効時の表示などを設定し、JavaScriptではページを表示してから3秒後にセレクトボックスを選択できない状態へ変更します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはセレクトボックス全体を構成するファイルです。「3秒後に選択できなくなるセレクトボックス」のタイトル、説明文、「好きな色」のラベル、「赤」「青」「緑」の選択肢、選択できなくなったあとに表示するメッセージを変更できます。
style.cssはセレクトボックス全体のデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、文字サイズのほか、セレクトボックスの通常時・フォーカス時・無効時の見た目を変更できます。
script.jsは指定時間後にセレクトボックスを選択できない状態へ変更するファイルです。ページを表示してから3秒後にdisabledを設定し、「選択できなくなりました。」というメッセージを表示します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを表示した直後はセレクトボックスから項目を選択できますが、3秒が経過するとセレクトボックスが無効になり、それ以降は別の項目を選択できなくなります。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、セレクトボックスの選択肢、無効化後に表示するメッセージを変更できます。option要素の内容を編集することで、色以外の選択項目として利用することもできます。
style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、タイトルやラベルの文字サイズ、セレクトボックスのサイズ、フォーカス時の枠線と影、無効時の背景色と文字色、メッセージの文字色などを変更できます。script.jsではsetTimeoutに指定している数値を変更することで、選択できなくなるまでの時間を調整できます。
数値調整
style.css
max-width:700px;
セレクトボックス全体を囲むエリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
全体を囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとセレクトボックスとの間隔が広がり、小さくすると狭くなります。
max-width:420px;
入力項目部分の最大横幅です。値を大きくするとセレクトボックスが横に広がり、小さくすると狭くなります。
margin:0 0 10px;
ラベルの下側余白です。10pxを大きくするとラベルとセレクトボックスの間隔が広がります。
padding:14px 16px;
セレクトボックスの内側余白です。上下の14pxを大きくすると高さが増し、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
セレクトボックスの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
セレクトボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 0 0 4px ...
セレクトボックスへフォーカスしたときに表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
margin:12px 0 0;
無効化後に表示するメッセージの上側余白です。12pxを大きくするとセレクトボックスとの間隔が広がります。
script.js
3000
セレクトボックスを選択できなくするまでの待機時間です。3000は3秒を表します。値を大きくすると選択できる時間が長くなり、小さくすると早く選択できなくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体の横幅が縮小されます。入力項目にもwidth:100%とmax-width:420pxを指定しているため、利用できる横幅に合わせてセレクトボックスが調整されます。また、640px以下では全体の余白をpadding:24px 18px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント