CSS4 :valid :invalid の使い方とブラウザ対応状況
フォーム（ inputタグ ）に関わるCSS4のセレクタ :valid :invalid の紹介です。
CSS4の話をする前にHTML5の話から。
input タグは入力欄を表示するタグです。これには type といってどのような値を入力できるか指定できる属性をつける事ができます。例えば
● type="text" 1行テキスト入力欄
● type="checkbox" チェックボックス
● type="submit" 送信ボタン
というように決められます。
HTML5よりこの type 属性の種類が大幅に増え、以下のものを type として設定できるようになりました。
● type="tel" 電話番号
● type="url" URL
● type="email" Eメールアドレス
● type="datetime" 世界標準時基準時間
● type="month" 月
● type="week" 週
● type="date" 日付
● type="time" 時間
● type="datetime-local" ローカル時間
● type="number" 数値
● type="range" 範囲
● type="color" 色
かなり増えてます。
:valid :invalid
:valid や :invalid は上で示した入力欄に入力された値が、 type 属性と合致しているかどうかを判断して
type 属性と合致している :valid
type 属性と合致していない :invalid
を区別するセレクタです。
合致しているかどうかはブラウザが勝手に判断します。URL として正しいか、Eメールアドレスとして正しいか、数値として正しいか等ですね。
具体的なCSSの書き方は
CSS
/*type 属性と合致している*/
input:valid {
border: 2px solid blue; /*合っている場合は青*/
}
/*type 属性と合致していない*/
input:invalid {
border: 2px solid red; /*合っていない場合は赤*/
}せっかくなので下に実際に input フォームを表示してみました。お使いのブラウザでは赤、青に分かれて見えるでしょうか。
入力欄は値を変更可能ですので、どのような値がOKで何がダメなのか実際変更して色の変化を見てみてください。 電話番号なんかはまだどんな値を入れても「合致している」と判断するようです。Eメールは @ の前後にアルファベットが必要。URLは http: が必要など判断基準があるようです。
メールを q-az@mail 等に書き換えると青くなりますし、 URL を https://q-az.net にしても青くなります。
また、CSS4の話とはあまり関係ないですが、HTML5で増えた range や color はこんな感じの入力欄になります。type="color" はブラウザによってはカラーパレットが開きます。
対応ブラウザは
IntenetExplorer10 以上
FireFox
GoogleChrome
Opera
Safari
とCSS4のセレクタになりますが、ほぼ全てのブラウザで使用可能となってます。CSS4のものと知らずに、もしかしたらもう既に使っている人もいるかもしれないですね。実際に合ってるかどうかの判断はブラウザに任せずやるべきですが、装飾的な意味で使うのはありかもしれないです。
:valid :invalid の現状
使用可能。ただし「合致」の判断は変更の可能性あり。