ywork2020.com

Title

無効な入力内容を検知する

目次 (INDEX)

:invalidとは

ここで説明する:invalid とは次の語句からなるCSSの疑似クラスです。
invalid
読み: インヴァリドゥ
意味: 無効、病弱

目次に戻る

:invalid疑似クラスの概要

この疑似クラスはセレクタに該当する入力要素の入力内容が無効な値である時に適用され一時的なプロパティ値の変更を行います。

無効な値とは入力要素の入力型にマッチしていな状態であったり、要素の属性により制限外の値であるものを指しています。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:invalid{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使うのはinput要素です。 この要素に:invalid疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。

目次に戻る

参考: 入力要素の無効な入力内容を検知する

ここではinput要素url型にURLを入力した要素をサンプルとしました。 背景色がlightskyblueになっている要素の内容は有効なURLだと判断されています。 文字色と背景色がgray と lightpinkになっている要素の内容は無効なURLだと判断されています。

input{
	background-color: ##lightskyblue;
}
input:invalid{
	color: ##gray;
	background-color: ##lightpink;
}

目次に戻る