:optional
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
:optional
は CSS の擬似クラスで、 required
属性が設定されていない <input>
, <select>
, <textarea>
要素を表します。
css
/* 任意の <input> をすべて選択 */
input:optional {
border: 1px dashed black;
}
試してみましょう
この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。
メモ: :required
擬似クラスは必須のフォーム欄を選択します。
構文
:optional
例
省略可能なフィールドの枠を紫にする
HTML
html
<form>
<div class="field">
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
</div>
<div class="field">
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required />
</div>
</form>
CSS
css
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
input:optional {
border-color: rebeccapurple;
border-width: 3px;
}
結果
アクセシビリティの考慮
仕様書
Specification |
---|
HTML Standard # selector-optional |
Selectors Level 4 # opt-pseudos |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 他の検証関連の擬似クラス:
:required
,:invalid
,:valid
- フォームデータの検証