入力中に色が変わるテキストボックスを作る方法
入力中に色が変わるテキストボックスをHTMLとCSSで作る方法を紹介します。通常時はグレーの枠線と白い背景で表示し、テキストボックスをクリックして入力できる状態になると、枠線・背景色・ラベルの色が青色へ切り替わる入力フォームです。現在操作している入力欄を視覚的に分かりやすく示せます。
サンプルでは、お名前・メールアドレス・電話番号の3つのテキストボックスを配置しています。入力欄を移動すると、それまで操作していた項目は通常の色へ戻り、新しく選択した項目だけが強調表示されます。お問い合わせ画面、会員登録画面、ECサイトの注文者情報、管理画面の編集フォームなど、複数の入力項目が並ぶ画面に適しています。
JavaScriptや外部ライブラリは使用せず、CSSの:focusと:focus-withinを利用して色を切り替えます。枠線や背景色、ラベルの色、角丸、余白、色が変わる速度は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="input-color-change_wrap">
<!-- 入力フォームのタイトル -->
<div class="input-color-change_title">
お客様情報を入力
</div>
<!-- 入力中の色変更を案内する説明文 -->
<p class="input-color-change_text">
入力欄をクリックすると、操作中の項目だけ色が変わります。
</p>
<!-- 3つの入力項目をまとめるエリア -->
<div class="input-color-change_fields">
<!-- お名前の入力項目 -->
<div class="input-color-change_group">
<!-- お名前入力欄のラベル -->
<label
class="input-color-change_label"
for="input-color-change-name">
お名前
</label>
<!-- お名前を入力するテキストボックス -->
<input
class="input-color-change_input"
id="input-color-change-name"
name="name"
type="text"
placeholder="例：山田 太郎">
</div>
<!-- メールアドレスの入力項目 -->
<div class="input-color-change_group">
<!-- メールアドレス入力欄のラベル -->
<label
class="input-color-change_label"
for="input-color-change-email">
メールアドレス
</label>
<!-- メールアドレスを入力するテキストボックス -->
<input
class="input-color-change_input"
id="input-color-change-email"
name="email"
type="email"
placeholder="例：sample@example.com">
</div>
<!-- 電話番号の入力項目 -->
<div class="input-color-change_group">
<!-- 電話番号入力欄のラベル -->
<label
class="input-color-change_label"
for="input-color-change-tel">
電話番号
</label>
<!-- 電話番号を入力するテキストボックス -->
<input
class="input-color-change_input"
id="input-color-change-tel"
name="tel"
type="tel"
placeholder="例：090-1234-5678">
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSのみで構成されており、全部で2ファイルです。JavaScriptを使用せず、CSSの:focusと:focus-withinを利用して、入力中のテキストボックスやラベル、背景色を切り替えます。シンプルな構成なので、初心者でも導入や編集がしやすく、お問い合わせフォームや会員登録フォームなどへそのまま利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテキストボックス・ラベル・説明文など、画面へ表示する内容を管理します。入力項目の追加や削除、ラベル名、プレースホルダーの文章を変更できます。
style.cssはテキストボックスのデザインを管理します。背景色、枠線の色、入力中の強調色、余白、角丸、文字サイズ、レスポンシブ表示などを変更できます。
設置方法・使い方
sampleフォルダ内へindex.htmlとstyle.cssを配置します。
index.htmlをブラウザで開くと利用できます。
テキストボックスをクリックすると、その入力欄だけラベル・枠線・背景色が切り替わり、入力中であることを分かりやすく表示します。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル名、プレースホルダー、入力項目の数を変更できます。
style.cssでは通常時・入力中の枠線色、背景色、ラベル色、文字サイズ、角丸、余白、ボックス幅などを自由に変更できます。
数値調整
style.css
max-width:720px;
テキストボックス全体の最大横幅です。900pxへ変更すると広く、500pxへ変更するとコンパクトになります。
padding:36px;
全体の内側余白です。48pxへ変更すると余白が広くなり、20pxへ変更すると詰まったレイアウトになります。
gap:22px;
入力項目同士の間隔です。32pxへ変更すると広がり、12pxへ変更すると間隔が狭くなります。
border-radius:20px;
全体の角丸です。30pxへ変更すると丸みが強くなり、0へ変更すると四角いデザインになります。
font-size:30px;
タイトルの文字サイズです。36pxへ変更すると大きくなり、24pxへ変更すると小さく表示されます。
transition:0.3s;
入力中の色が切り替わる速度です。0.6sへ変更するとゆっくり切り替わり、0.1sへ変更すると素早く切り替わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、box-sizing:border-boxを使用し、画面幅に応じてレイアウトが自動で調整されます。また、640px以下ではメディアクエリにより余白や文字サイズを縮小し、スマートフォン・タブレット・PCでも見やすく利用できます。
コメント