ywork2020.com

Title

要素のrequired属性を検知する

目次 (INDEX)

:optionalとは

ここで説明する:optional とは次の語句からなるCSSの疑似クラスです。
optional
読み: オプショナル
意味: 任意の、自由意志の

目次に戻る

:optional疑似クラスの概要

この疑似クラスはセレクタに該当する要素に required 属性が設定されていないことを検知します。

これはCSSの :required 疑似クラスと逆の働きであり、フォームの送信項目の中で入力値が必須ではない要素にスタイルを適用するのに便利です。

目次に戻る

構文

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

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

目次に戻る

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

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

サンプルに使用する要素はrequired属性が使えるinput要素とselect要素にしました。

目次に戻る

参考: 要素のrequired属性を検知する

<body>
	<form>
		<div><input required type="text" value="Text1"></div>
		<div><input type="text" value="Text2"></div>
		<div>
			<select required>
				<option>Menu1</option>
			</select>
		</div>
		<div>
			<select>
				<option>Menu2</option>
			</select>
		</div>
	</form>
</body>
 

<style>
	div{
		margin: 3em 0;
	}
	input:optional, select:optional{
		color: ##deeppink;
	}
</style>

目次に戻る