Jul. 20th,2021
＃
“:invalid”擬似クラス
“:invalid”擬似クラスは要素のコンテンツや値が妥当ではない要素を選択する擬似クラスです。
どのようにしてコンテンツや値の妥当性が判断されるかは文書が記述されている言語の定義に依ります。
HTMLではフォームの入力欄に入力された内容が妥当性のチェックを通らない要素が“:invalid”擬似クラスによって選択されます。
以下の要素が“:invalid”擬似クラスによって選択されるとしています。
- 入力値の制約が満たされていない送信可能要素
- 入力値の制約を満たさないフォーム関連要素が1個以上関連付けられている“form”要素
- 入力値の制約を満たさない子孫要素が1個以上ある“fieldset”要素
＃
使用例
input:valid {
border: solid 5px #43676b; /*■*/
}
fieldset:valid {
background-color: #badcad; /*■*/
}
input:invalid {
border: solid 5px #d0576b; /*■*/
}
fieldset:invalid {
background-color: #d4acad; /*■*/
}
<form method="post" action="sample-inputtag2.php" target="_blank">
<fieldset>
<p><label>猫の名前：<input type="text" name="sample01" pattern="(?=.*?[\u3041-\u309F])[\u3041-\u309F\u30FC]*" title="ひらがなで入力してください"></label></p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>
＃
