フォームの状態に関する擬似クラス

:checked

checked.png
スクリーンショット：2017年9月

チェックボックスやラジオボタンには、チェック済みの要素に対して*:checked*擬似クラスを利用することができます。

以下のように、チェックボックスとラジオボタンで使い分けることもできます。

input[type="checkbox”]:checked {…}

input[type="radio”]:checked {…}

:enabled と :disabled

次に、htmlのフォーム部品に利用不可の「disabled」を使った場合に適用できる擬似クラス*:disabledと、disabledではない状態の要素に適用できる:enabled*を紹介します。

例えば、送信ボタンが利用可能か利用不可能かによってスタイルを使い分ける場合には、以下のように行います。

input[type="submit”]:enabled {…}

input[type="submit”]:disabled {…}

:default

:default擬似クラスでは、初期状態で「checked」されているチェックボックスやラジオボタンに対してスタイルを適用することができます。
例えば、ラベル付きのチェックボックスの初期状態は、以下のように指定します。

input[type="checkbox”]:default + label {…}

注意しておきたいのは、チェックボックスやラジオボタンでチェックを外しても、:checkedと違ってスタイルが消えることはないという点です。

:focus

フォームにおける*:focus*擬似クラスでは、テキストエリアやテキストフィールドが入力中だった場合にスタイルを適用します。

input:focus, textarea:focus {…}

:required と :optional

フォーム部品に「required」をつけることで入力項目が必須になり、ブラウザによっては空欄では送信を行うことができなくなっています。
そのような入力必須部品には*:requiredを、そうではないものについては:optional*でスタイルを付加することができます。

以下は、オプショナルかつホバーしたテキストエリアのスタイルを指定するものです。

textarea:optional:hover {…}

:in-range と :out-of-range

number.gif
スクリーンショット：2017年9月

:in-rangeはやや特殊な擬似クラスで、例えば次のような入力フィールドがあるとします。

<input type="number" min="1" max="10" value="8">

今、この数字の入力フィールドに対して、最小値1と最大値10が設定されています。
入力された数値がこの範囲内であればin-range、この範囲外であれば*:out-of-range*で指定されたスタイルを適用します。

:read-only と read-write

:read-onlyは「readonly」属性が付加された、いわゆる読み込み専用の、編集不可能でコピーだけができるテキストエリアなどに適用できる擬似クラスです。

<textarea name="nm" id="id" cols="30" rows="10" readonly> </textarea>

このような場合には*:read-only擬似クラスが適用されます。
一方、この擬似クラスが適用されない編集可能なフォーム部品に関しては、:read-write*を適用可能です。

:valid と :invalid

例えば、

<input type="email”>

でEメールアドレスを収集する場合に、メールアドレスの形として正しければ*:validを、そうでなければ:invalid*のスタイルを適用します。

::placeholder

::placeholderでは、テキストエリアなどの要素のプレイスホルダー部分にだけスタイルを適用することができます。

::placeholder {
　　color: #96eb7f;
　　font-family: Lato, sans-serif;
}