:valid

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

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

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

構文

:valid

例は :invalid を参照してください。

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

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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:validChrome 完全対応 10Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 10Safari 完全対応 5WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0
Applies to <form> elementsChrome 完全対応 40Edge 未対応 なしFirefox 完全対応 13IE 未対応 なしOpera 完全対応 27Safari 完全対応 9WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 14Opera Android 完全対応 27Safari iOS 完全対応 9Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応

関連項目