CSSの:optional疑似クラスで、任意入力フィールドのスタイルを設定する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:optional は、ユーザーが入力するフォーム要素において、必須 (required) ではない要素にスタイルを適用する擬似クラスです。input、textarea、select などに対して使用され、フォーム内で任意入力のフィールドにのみスタイルを適用できます。

スポンサーリンク

:optional の値とその効果の一覧

  • :optional – 必須でないフォーム要素にスタイルを適用します。

注意点や関連情報

:optional は、フォームの中で required 属性が設定されていない要素にのみスタイルが適用されます。required 属性が設定された場合、その要素には :required のスタイルが適用され、:optional の効果は無効になります。

:optionalが効かない理由として考えられること

対象の要素がフォーム要素でない

:optionalは、<input>、<textarea>、<select>など、フォーム要素に適用されます。それ以外の要素には適用されません。
対策：対象の要素がフォーム要素（<input>や<textarea>など）であることを確認し、非フォーム要素には別の擬似クラスを使用します。

required属性が設定されている

:optionalは、required属性が設定されていないフォーム要素に適用されます。required属性がある場合、その要素は必須フィールドとして扱われるため、:optionalは適用されません。
対策：フォーム要素にrequired属性が設定されていないか確認し、オプションフィールドとして機能させたい場合は、required属性を削除します。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    max-width: 400px;
}

.css-sample-input {
    padding: 10px;
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

表示例

CSS :optional

:optional は、任意入力のフォームフィールドにスタイルを適用します。

HTMLコード

<div class="css-sample-container">
    <label for="optional-input">任意入力のフィールド</label>
    <input type="text" id="optional-input" class="css-sample-input css-sample-input-optional">
    
    <label for="required-input">必須入力のフィールド</label>
    <input type="text" id="required-input" class="css-sample-input css-sample-input-optional" required>
</div>

CSSコード

.css-sample-input-optional:optional {
    border: 2px solid lightgreen;
    background-color: #e0ffe0;
}

表示結果

まとめ

  • :optional は、required 属性が設定されていないフォーム要素にスタイルを適用します。
  • 必須 (required) のフィールドには適用されず、:required と対の関係になります。
  • フォームの任意入力フィールドを視覚的に区別したい場合に便利です。
スポンサーリンク