CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:disabledセレクターで無効化されたinput要素をスタイリングする方法

フォーム内で無効化（disabled）されたすべての <input> 要素にスタイルを適用したい場合は、CSSの :disabled 擬似クラスセレクターを使用します。このセレクターは、disabled 属性が付与された入力要素を自動的に判別し、指定したスタイルを反映してくれます。

また、対になる :enabled セレクターを使えば、操作可能な（有効な）状態の入力要素にも別々のスタイルを設定できます。両者を組み合わせることで、ユーザーが入力できる項目とできない項目を視覚的に明確に区別でき、フォームの使いやすさが向上します。

以下のコードでは、有効な入力欄の背景色を青色に、無効化された入力欄の背景色を赤色に設定しています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
background: blue;
}
input:disabled {
background: red;
}
</style>
</head>
<body>
<form action="">
Subject <input type="text" name="subject"><br>
Student: <input type="text" name="student"><br>
Age: <input type="number" name="age" disabled><br>
</form>
</body>
</html>

ポイント解説

  • :disabled … disabled 属性が付いている入力要素にマッチします。上記の例では「Age」フィールドが該当し、背景が赤く表示されます。
  • :enabled … 入力可能な状態の要素にマッチします。「Subject」「Student」フィールドが該当し、背景が青く表示されます。
  • 対応ブラウザ … どちらの擬似クラスも主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）で広くサポートされており、特別なJavaScriptは不要です。

このように :disabled セレクターを活用すれば、読み取り専用の項目をひと目で分かるようにでき、ユーザーの入力ミスや混乱を防ぐことができます。ボタンやテキストエリアなど、他のフォーム部品に対しても同様に適用可能です。

  1. CSSの:validセレクターで有効な値を持つinput要素をスタイリングする方法

    CSSの:validセレクターを使用すると、有効な値が入力されたすべての<input>要素に対してスタイルを適用できます。 :validセレクターとは :validセレクターは、フォームの入力内容がバリデーション（妥当性チェック）を通過した場合にのみスタイルを適用する擬似クラスです。たとえば、type=emailの入力欄に正しい形式のメールアドレスが入力されたときだけ、背景色や文字色を変えるといった使い方ができます。逆に、無効な値が入力された場合にスタイルを適用したい場合は「:invalid」セレクターを使用します。両者を組み合わせることで、ユーザーに入力の正誤を視覚的にフィードバ

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-