CSS4 :valid :invalid の使い方とブラウザ対応状況

フォーム( inputタグ )に関わるCSS4のセレクタ :valid :invalid の紹介です。

CSS4

CSS4の話をする前にHTML5の話から。

input タグは入力欄を表示するタグです。これには type といってどのような値を入力できるか指定できる属性をつける事ができます。例えば

type="text" 1行テキスト入力欄
type="checkbox" チェックボックス
type="submit" 送信ボタン

というように決められます。

HTML5よりこの type 属性の種類が大幅に増え、以下のものを type として設定できるようになりました。

type="search" 検索フォーム
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 の現状

使用可能。ただし「合致」の判断は変更の可能性あり。

参考:
HTML5クイックリファレンス input
CSS4 ≫ Range pseudo-class

Top