CSSの:enabledでユーザーが操作可能なフォーム要素にスタイルを適用する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:enabled擬似クラスは、フォーム要素が有効である（ユーザーが操作できる）場合に、その要素にスタイルを適用するために使用されます。この擬似クラスは、主にフォームの<input>や<select>、<button>などの要素に適用されます。

スポンサーリンク

CSSの:enabledの値とその効果の一覧

  • :enabled – フォーム要素が有効な状態にある場合にスタイルを適用します。

注意点と関連情報

:enabled擬似クラスは、フォーム要素が有効な状態にある場合にのみ適用されます。つまり、フォーム要素が操作可能であることが前提となります。逆に、無効な場合には:disabled擬似クラスを使用してスタイルを適用できます。

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

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

:enabledは<input>、<button>、<select>、<textarea>などのフォーム要素にのみ適用されます。非フォーム要素には効果がありません。
対策：enabled状態を確認したい要素がフォーム要素であることを確認し、非フォーム要素には別のクラスや状態管理を使用してスタイルを適用します。

disabled属性が誤って設定されている

disabled属性が誤って設定されている場合、enabled状態として認識されず、:enabledが機能しないことがあります。
対策：disabled属性が適切に設定されているか確認し、disabled属性が設定されていない場合に:enabledが適用されることを確認します。

共通するCSSコード

.css-sample-container {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin-bottom: 30px;
}

.css-sample-box:enabled {
  background-color: lightgreen;
  border: 1px solid green;
}

.css-sample-box:disabled {
  background-color: lightgray;
  border: 1px solid red;
}

:enabledの表示例

以下は、フォーム要素に適用された:enabled擬似クラスの表示例です。有効なフォーム要素には、緑の背景色と枠線が適用されます。

HTMLコード

<div class="css-sample-container">
  <input type="text" class="css-sample-box" value="有効な入力欄" />
  <input type="text" class="css-sample-box" value="無効な入力欄" disabled />
  <button class="css-sample-box">有効なボタン</button>
  <button class="css-sample-box" disabled>無効なボタン</button>
</div>

CSSコード

.css-sample-box:enabled {
  background-color: lightgreen;
  border: 1px solid green;
}

.css-sample-box:disabled {
  background-color: lightgray;
  border: 1px solid red;
}

表示結果

まとめ

  • :enabled擬似クラスは、フォーム要素が有効な場合に適用されます。
  • フォームが操作可能な状態であることが前提です。
  • 逆に、無効なフォーム要素には:disabledを使用してスタイルを適用することができます。
スポンサーリンク