フォーム要素の擬似クラス

フォームの状態にあわせてCSSを適用する

CSSにはフォーム関連の要素にスタイルを適用するための擬似クラスが用意されています。
この擬似クラスはフォームを入力する項目の各状態に対応します。

たくさんありますが、ブラウザの対応状況にもバラつきがあるため注意が必要です。
それぞれの擬似クラスについて、対応しているブラウザと使用例を解説していきます。

:focus

「:focus」は入力状態の時に適用される擬似クラスです。
入力している場所を明確に示すことができます。

対応ブラウザ

CSS コード例

input:focus,
select:focus {
  background-color: #dcfbff;
}

HTML コード例

<label>お名前</label><input type="text" name="your_name" value="" placeholder="山田 太郎" required>
<label>フリガナ</label><input type="text" name="furigana" value="" placeholder="ヤマダ タロウ" required>
<label>年齢</label><input type="number" name="age" value="" min="16" max="25">
<label>性別</label>
<label for="gender_male" class="for_check">男性<input id="gender_male" type="radio" name="gender" value="男性" checked></label>
<label for="gender_female" class="for_check">女性<input id="gender_female" type="radio" name="gender" value="女性"></label>
<label>職業</label>
<select name="job">
  <option value="">選択してください</option>
  <option value="会社員">会社員</option>
  <option value="自営業" selected>自営業</option>
  <option value="学生">学生</option>
  <option value="その他">その他</option>
</select>

このスタイルが適用されると、次のように入力状態の項目のみ背景色が変わります。

:checked

「:checked」はラジオボタン、チェックボックス、セレクト（プルダウン）の項目を選択した時に適用されます。

対応ブラウザ

CSS コード例

input[type=radio]:checked {
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: none;
  background:  #ff1c92;
  vertical-align: middle;
}

HTML コード例

<label>性別</label>
<label for="gender_male" class="for_check">男性<input id="gender_male" type="radio" name="gender" value="男性" checked></label>
<label for="gender_female" class="for_check">女性<input id="gender_female" type="radio" name="gender" value="女性"></label>

上記コード例は、「性別」で選択された項目に対してスタイルを適用しています。

:disabled と :enabled

「:disabled」は、入力を無効状態にするdisabled属性が設定された入力項目に適用されます。
対をなす「:enabled」は入力ができる項目に適用されます。

対応ブラウザ

CSS コード例

<style>
input:disabled {
  background: #f7f7f7;
}
input:enabled,
select:enabled {
  background-color: #dcfbff;
}

HTML コード例

<label>お名前</label><input type="text" name="your_name" value="" placeholder="山田 太郎" required>
<label>フリガナ</label><input type="text" name="furigana" value="" placeholder="ヤマダ タロウ" disabled>
<label>年齢</label><input type="number" name="age" value="" min="16" max="25">
<label>性別</label>
<label for="gender_male" class="for_check">男性<input id="gender_male" type="radio" name="gender" value="男性" checked></label>
<label for="gender_female" class="for_check">女性<input id="gender_female" type="radio" name="gender" value="女性"></label>
<label>職業</label>
<select name="job">
  <option value="">選択してください</option>
  <option value="会社員">会社員</option>
  <option value="自営業" selected>自営業</option>
  <option value="学生">学生</option>
  <option value="その他">その他</option>
</select>

このスタイルが適用されると、入力ができる項目は背景が水色になり、入力できない項目との区別をハッキリさせることができます。

:required と :optional

「:required」はrequired属性が指定された入力必須の項目に対して適用されます。
もう1つの:optionalはrequired属性が指定されていない任意の入力項目（通常の入力項目）に適用されます。

対応ブラウザ

CSS コード例

input:required,
select:required {
  border-color: #c00;
}
input:optional,
select:optional {
  border-color: #00b8ce;
}

HTML コード例

<label>お名前</label><input type="text" name="your_name" value="" placeholder="山田 太郎" required>
<label>フリガナ</label><input type="text" name="furigana" value="" placeholder="ヤマダ タロウ">
<label>年齢</label><input type="number" name="age" value="" min="16" max="25">
<label>性別</label>
<label for="gender_male" class="for_check">男性<input id="gender_male" type="radio" name="gender" value="男性" checked></label>
<label for="gender_female" class="for_check">女性<input id="gender_female" type="radio" name="gender" value="女性"></label>
<label>職業</label>
<select name="job">
  <option value="">選択してください</option>
  <option value="会社員">会社員</option>
  <option value="自営業" selected>自営業</option>
  <option value="学生">学生</option>
  <option value="その他">その他</option>
</select>

上記のコード例の場合、「お名前」のみrequired属性が指定されているため、この項目のみ擬似クラス「:required」のスタイルが適用されます。
それ以外は任意の入力項目として「:optional」のスタイルが適用されます。

:valid と :invalid

「:valid」はメールアドレスやURLなどの入力項目に正しい形式で入力された場合に適用されます。
逆に不正な形式で入力された場合には「:invalid」が適用されます。

対応ブラウザ

CSS コード例

input[type=email]:invalid {
  border-color: #c00;
}
input[type=email]:valid {
  border-color: #328c13;
}

HTML コード例

<label>メールアドレス</label><input type="email" name="email" value="">

上記のコード例はメールアドレスの入力項目に対し、入力された値がメールアドレスとして形式が正しい場合は「:valid」のスタイルを適用し、正しくない場合は「invalid」のスタイルを適用します。

このように入力値によってスタイルを切り替えることで、入力した値が形式的に正しいかを分かりやすく伝えることができます。

:in-range と :out-of-range

数値入力で最小値や最大値が決められている場合、入力値がその範囲内に収まっているかで適用される擬似クラスです。
範囲内に収まっていたら「:in-range」、範囲外の値が入力されていたら「:out-of-range」が適用されます。

上記の「:valid」はメールアドレスやURLなどの入力項目に正しい形式で入力された場合に適用されます。
逆に不正な形式で入力された場合には「:invalid」が適用されます。

対応ブラウザ

CSS コード例

input:in-range {
  border-color: #328c13;
}
input:out-of-range {
  border-color: #c00;
}

HTML コード例

<div><label>年齢</label><input type="number" name="age" value="" min="16" max="25"></div>

上記のスタイルは入力値が制限範囲内のときは「#328c13（緑）」にし、範囲外のときは「#c00（赤）」にします。

すぐ下のinput要素でmin属性（最小値）とmax属性（最大値）を使って「16〜25」の値を受け付けるように制限を指定しています。
ここで年齢が15才以下、または26才以上が入力された場合は「:out-of-range」が適用され、16才以上〜25才以下であれば「:in-range」が適用されます。

:read-only と :read-write

フォームに入力値を編集できないreadonly属性をもつ項目がある場合は、擬似クラス「:read-only」を使ってスタイルを適用することができます。
通常の入力ができる項目にも「:read-write」という擬似クラスが用意されています。

対応ブラウザ

CSS コード例

<style>
input:read-only {
  border-color: #ddd;
  background-color: #f7f7f7;
}
input:read-write {
  border: 2px solid #666;
  background-color: #fff;
}

HTML コード例

<label>お名前</label><input type="text" name="your_name" value="" placeholder="山田 太郎" required>
<label>フリガナ</label><input type="text" name="furigana" value="" placeholder="ヤマダ タロウ" required>
<label>参加セミナー</label><input type="email" name="seminar" value="第4回 川越セミナー" readonly>
<label>年齢</label><input type="number" name="age" value="" min="16" max="25">

「お名前」「フリガナ」「年齢」は通常の入力ができるため「:read-write」のスタイルが適用されます。
「参加セミナー」のみはreadonly属性が指定されていて入力や編集ができないため、「:read-only」のスタイルが適用されます。

:default

ラジオボタン、チェックボックス、プルダウンメニューの項目に、初期値（既定値）が設定されているときに適用する擬似クラスです。
2018年7月現在、EdgeとIEシリーズには対応していません。

対応ブラウザ

CSS コード例

select option:default {
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: none;
  background:  #ff1c92;
  vertical-align: middle;
}

HTML コード例

<label>職業</label>
<select name="job">
  <option value="">選択してください</option>
  <option value="会社員">会社員</option>
  <option value="自営業" selected>自営業</option>
  <option value="学生">学生</option>
  <option value="その他">その他</option>
</select>

「職業」の選択欄に「自営業」をselected属性で規定値として設定し、「:default」を適用している例です。