:optional

:optionalCSS擬似クラスで、 required 属性が設定されていない <input>, <select>, <textarea> 要素を表します。

/* 任意の <input> をすべて選択 */
input:optional {
  border: 1px dashed black;
}

この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。

注: :required 擬似クラスは必須のフォーム欄を選択します。

構文

:optional

オプションのフィールドの枠を紫にする

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

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

結果

アクセシビリティの考慮

フォームに必須ではない <input> が含まれている場合、必須の入力欄には required 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

仕様書

仕様書 状態 備考
HTML Living Standard
:optional の定義
現行の標準 変更なし。
HTML5
:optional の定義
勧告 HTML の意味論と制約検証を定義。
Selectors Level 4
:optional の定義
草案 変更なし。

ブラウザーの互換性

BCD tables only load in the browser

関連項目