皆さん、こんにちは。
制作部の関です。
今回は「【CSS】フォーム(form)で使える擬似クラス」についてのお話をします。
今回はとあるサイトで見た擬似クラスを備忘録として残しておきます。
①:focus-within
子孫要素に1つでも:focus状態の要素がある時に、状態を変更するための擬似クラスです。
※IEは対応していないため注意
クリックするとformの色がオレンジに変わるようにしています。
②:in-range
min/max属性によって値が制限されている場合において、
入力された値が制限範囲内の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください
③:out-of-range
min/max属性によって値が制限されている場合において、
入力された値が制限範囲外の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください
④:valid
入力された値の形式が正しい時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください
⑤:invalid
入力された値の形式が不適切な時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください
⑥:required
required属性が設定されている要素を変更するための擬似クラスです。
⑦:optional
required属性が設定されていない要素を変更するための擬似クラスです。
↓①～⑦を用いたサンプルコード
See the Pen
Untitled by d-grip (@d-grip)
on CodePen.
formのユーザビリティを向上させるのに使えそうです。
以上、制作部の関でした。