MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

概要

:valid CSS 疑似クラス は、その内容が バリデーション により type 属性の設定に従い正しく入力されている任意の <input> 要素や <form> 要素にマッチします。これは入力内容の書式が正しい場合にその要素に異なるスタイルを適用し、ユーザーに誤りがないことを伝えるのに役立ちます。

構文

:valid { style properties }

この例は、有効であるときは要素を緑色に、また無効であるときは要素を赤色にする、シンプルなフォームです。

HTML コンテンツ

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>

CSS コンテンツ

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}
  
input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:valid {
  border-color: #008000;
}

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
:valid の定義
現行の標準 変更無し
HTML5
:valid の定義
勧告 HTML に関するセマンティクスと制約バリデーションが含まれている
Selectors Level 4
:valid の定義
草案 変更無し
CSS Basic User Interface Module Level 3
:valid の定義
勧告候補 疑似クラスが定義されているが、セマンティクスに関する記述は含まれない

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 10.0 (有) 4.0 (2) 10 (input タグに限る) 10.0 5.0
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? (有) 4.0 (2) 未サポート 10.0 5.0

関連情報

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

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