Jul. 20th,2021
＃
“:valid”擬似クラス
“:valid”擬似クラスは要素のコンテンツや値が妥当である要素を選択する擬似クラスです。
どのようにしてコンテンツや値の妥当性が判断されるかは文書が記述されている言語の定義に依ります。
HTMLではフォームの入力欄に入力された内容が妥当性のチェックを通った要素が“:valid”擬似クラスによって選択されます。
以下の要素が“:valid”擬似クラスによって選択されるとしています。
- 入力値の制約が満たされている送信可能要素
- 入力値の制約を満たさないフォーム関連要素が関連付けられていない“form”要素
- 入力値の制約を満たさない子孫要素がない“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>
＃
