:valid
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
:valid は CSS の擬似クラスで、内容物の検証に成功した <input> 要素 やその他の <form> 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。
/* 有効な <input> をすべて選択 */
input:valid {
background-color: powderblue;
}
試してみましょう
label {
display: block;
margin-top: 1em;
}
input:valid {
background-color: ivory;
border: none;
outline: 2px solid deepskyblue;
border-radius: 5px;
accent-color: gold;
}
<form>
<label for="email">Email Address:</label>
<input id="email" name="email" type="email" value="na@me@example.com" />
<label for="secret">Secret Code: (lower case letters)</label>
<input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
<label for="age">Your age: (18+)</label>
<input id="age" name="age" type="number" value="5" min="18" />
<label
><input name="tos" type="checkbox" required checked /> - Do you agree to
ToS?</label
>
</form>
この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。
構文
:user-valid
例
有効／無効なフォームフィールドを示す
この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の <span> が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。
<div>
<label for="fname">First name *: </label>
<input id="fname" name="fname" type="text" required />
<span></span>
</div>
これらの表示を提供するために、以下の CSS を使用します。
input + span {
position: relative;
}
input + span::before {
position: absolute;
right: -20px;
top: 5px;
}
input:invalid {
border: 2px solid red;
}
input:invalid + span::before {
content: "✖";
color: red;
}
input:valid + span::before {
content: "✓";
color: green;
}
生成されたコンテンツを相対的に配置できるように <span> を position: relative に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。
メモ:
これらのラベルを追加するために ::before を使ったのは、すでに ::after を "required" ラベルに使っていたからです。
以下で試してみることができます。
必須のテキスト入力は、空の状態では無効ですが、何かが記入されている状態では有効であることに注意してください。一方、 email の入力は、必須ではないため、空の場合は有効ですが、適切な email アドレスでないものが含まれている場合は無効となります。
アクセシビリティの考慮
緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。
仕様書
| Specification |
|---|
| HTML # selector-valid |
| Selectors Level 4 # valid-pseudo |
ブラウザーの互換性
Loading…
関連情報
- 他の検証関連の擬似クラス:
:required,:optional,:invalid - フォームデータの検証
- JavaScript からの検証状態へのアクセス