ywork2020.com

Title

入力必須の要素を検知する

目次 (INDEX)

:requiredとは

ここで説明する:required とは次の語句からなるCSSの疑似クラスです。
required
読み: レクワイアド
意味: 必須の、必修の、必要とする

目次に戻る

:required疑似クラスの概要

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

入力必須とは具体的にいうと要素の属性に required が設定してあるものだけです。 この属性は input要素select要素textarea要素 で使用することができます。

目次に戻る

構文

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

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

目次に戻る

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

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

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

目次に戻る

参考: 入力必須の要素を検知する

このサンプルに使う要素は3つのinput要素に関連するラベル要素と附随コメント要素です。

:required疑似クラスが検知してCSSプロパティを設定する要素はinput要素に required属性 が設定してあるものだけです。

<body>
	<form>
		<p><label>お名前:</label> <input type="text" name="name" required placeholder="your name"> <small></small></p>
		<p><label>e-mail:</label> <input type="email" name="mail" required placeholder="example@domain.tld"> <small></small></p>
		<p><label>phone:</label> <input type="tel" name="phone" min="0"> <small></small></p>
	</form>
</body>

CSSサンプルの仕様としては入力必須のinput要素の境界線を二重線にしており、その要素に附随するsmall要素のコンテンツに疑似要素を使って 「※ 必須」 という文字列を追加しています。

<style>
	input:required{
		border: double;
	}
	input:required + small::after{
		color: ##red;
		font-size: 80%;
		content: "※ 必須";
	}
</style>

目次に戻る