CSSの:disabledで無効化されたフォーム要素にスタイルを適用する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:disabled擬似クラスは、フォーム要素が無効（disabled）状態にあるときにスタイルを適用するために使用されます。このクラスを使うことで、ユーザーが無効なフォーム要素に対して視覚的にその状態を認識できるようにします。

スポンサーリンク

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

  • :disabled – 無効状態のフォーム要素に対して適用されます。

注意点と関連情報

:disabled擬似クラスは、主に<input>、<button>、<select>、<textarea>などのフォーム要素に適用されます。ユーザーが無効状態の要素を操作できないことを視覚的に示すために使用されます。通常、無効状態の要素にはdisabled属性が追加されています。

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

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

:disabledは<input>、<button>、<select>、<textarea>など、フォームに関連する要素にのみ適用されます。非フォーム要素（例：<div>や<span>）には効果がありません。
対策：disabled属性が設定されるフォーム要素に対してスタイルを適用するようにし、非フォーム要素にはdisabled属性を使わないか、別の手法（クラスやJavaScript）を利用します。

disabled属性が設定されていない

:disabledは、対象の要素にdisabled属性が設定されていないと機能しません。disabled属性が欠けている場合、スタイルは適用されません。
対策：対象要素にdisabled属性が正しく設定されていることを確認し、必要に応じて<input disabled>のように明示的に設定します。

共通するCSSコード

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

.css-sample-box {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  padding: 10px;
  margin-bottom: 10px;
}

:disabledの表示例

以下は、無効状態のフォーム要素に対して適用されるスタイルの表示例です。背景色が灰色、文字色が濃い灰色になり、カーソルは「not-allowed」に変更されます。

HTMLコード

<div class="css-sample-container">
  <input type="text" class="css-sample-box" value="有効なテキストボックス">
  <input type="text" class="css-sample-box" disabled value="無効なテキストボックス">
  <button class="css-sample-box">有効なボタン</button>
  <button class="css-sample-box" disabled>無効なボタン</button>
</div>

CSSコード

.css-sample-box:disabled {
  background-color: lightgray;
  color: darkgray;
  cursor: not-allowed;
}

表示結果

まとめ

  • :disabled擬似クラスは、フォーム要素が無効状態のときに適用されます。
  • 無効状態の要素は、通常、背景色が灰色になり、カーソルが「not-allowed」に変わります。
  • 主にフォーム要素（<input>、<button>、<select>、<textarea>）に対して使用されます。
スポンサーリンク