WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

CSSでよく見る [disabled] って何？:disabled との違いをわかりやすく解説

CSSでよく見る [disabled] って何？:disabled との違いをわかりやすく解説

投稿者の画像

y.harima

2025.09.10

この記事を共有する

この記事を共有する

Close

もっと知らせる

「disabled」はフォームのスタイルを整えるときによく使われます。

CSSでは [disabled] と :disabled の2種類の指定方法があり、見た目は似ていますが動作には違いがあります。

この記事では、初心者にもわかりやすくその違いを解説します。

disabled ってそもそも何？

disabled は 「無効化されている状態」 を表す属性です。
主に HTML のフォーム要素（<input>, <button>, <select>, <textarea> など）に使われます。

disabled の効果

  • ユーザーが操作できない（入力・選択・クリック不可）
  • 値はフォーム送信されない
  • 多くのブラウザでは自動的にグレーアウト表示

CSSでの指定方法

CSSでは、disabled を次の2通りで指定できます。

[disabled]（属性セレクタ）とは？

[disabled] は、属性セレクタ です。
HTML要素に disabled 属性が「書かれているかどうか」だけを判定します。

input[disabled] {
  background: #eee;
}
<!-- いずれも [disabled] にマッチ -->
<input type="text" disabled>
<input type="text" disabled="disabled">
<input type="text" disabled="">

属性セレクタとは
HTML要素の持っている属性の値や存在に基づいて要素を選択するCSSセレクタのことです。

:disabled（擬似クラス）とは？

:disabled は 疑似クラス です。
ブラウザが要素を「実際に無効化された状態」と認識しているかを判定します。

input:disabled {
  opacity: 0.5;
}
<fieldset disabled>
  <input type="text">
</fieldset>

この場合、<input> 自体に属性はありませんが、fieldset の影響で無効化されるため、:disabled にマッチします。

疑似クラスとは
HTML要素そのものではなく、その要素の特定の状態や条件に基づいてスタイルを適用するためのCSSの仕組みのことです。

fieldsetタグとは
fieldset タグは、HTMLフォームで関連する入力項目をグループ化するための要素です。

  • フォーム内の複数の入力（<input> や <select> など）をひとまとめにして枠で囲む
  • グループのタイトルを <legend> タグでつけることができる

使い分けの目安

1. フォームの操作不可スタイルをつけたい場合 → :disabled

:disabled はブラウザが無効と認識している要素すべてに適用されるので、fieldset 内の input などもカバーできます。

See the Pen knowledge_disabled_001 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

✅ この場合、fieldset に disabled があっても、fieldset 内の input や button すべてにスタイルが適用されます。

2. 属性そのものの存在をチェックしたい場合 → [disabled]

[disabled] は属性が存在するかどうかだけを見ます。
JavaScript で属性を操作したり、HTML の記述状況に応じてスタイルを変えたい場合に便利です。（JS操作や特定要素のみ適用）

See the Pen knowledge_disabled_002 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

✅ この場合、disabled 属性が付いていない input にはスタイルが適用されません。
fieldset の有無に関係なく、属性がある要素だけに反映されます。

まとめ

  • 操作不可の見た目を統一したいとき（状態ベース） → :disabled
  • 属性の有無を確認して特定要素だけにスタイルを当てたいとき（属性ベース） → [disabled]

関連リンク

もっと知らせる