:valid

CSS:valid 擬似クラスは、内容の検証に成功した <input> 要素 やその他の <form> 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。

/* 有効な <input> をすべて選択 */
input:valid {
  background-color: powderblue;
}

この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。

構文

:valid

この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。

<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 に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。

Note: We've used ::before to add these labels, as we were already using ::after for the "required" labels.

You can try it below:

Notice how the required text inputs are invalid when empty, but valid when they have something filled in. The email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address.

アクセシビリティの考慮事項

緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

仕様書

仕様書 状態 備考
HTML Living Standard
:valid の定義
現行の標準 変更なし。
HTML5
:valid の定義
勧告 HTML の意味論と制約検証を定義。
Selectors Level 4
:valid の定義
草案 初回定義。

ブラウザーの互換性

BCD tables only load in the browser

関連項目