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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 10Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 10Safari 完全対応 5WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 5Samsung Internet Android ?
Applies to <form> elementsChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 13IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 14Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank
最終更新者: mfuji09,