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

CSSの:enabledセレクターで有効なすべてのinput要素にスタイルを適用する方法

フォーム内の有効（enabled）なすべての<input>要素にまとめてスタイルを適用したい場合は、CSSの:enabledセレクターを使用します。

:enabledセレクターとは

:enabledは、ユーザーが操作可能な状態（無効化されていない）のフォーム要素を対象とする擬似クラスです。disabled属性が付与された要素は除外されるため、入力可能なフィールドだけを視覚的に強調したい場合に便利です。

サンプルコード

以下のコードでは、有効な<input>要素のみ背景色が青色になり、disabled属性が設定された「Age」フィールドにはスタイルが適用されません。

<!DOCTYPE html>
<html>
<head>
<style>
  input:enabled {
    background: blue;
    color: white;
  }
</style>
</head>
<body>
<form action="">
  科目: <input type="text" name="subject"><br>
  生徒名: <input type="text" name="student"><br>
  年齢: <input type="number" name="age" disabled><br>
</form>
</body>
</html>

実行結果のポイント

  • 科目と生徒名のテキスト入力欄は有効なため、青色の背景が適用されます。
  • 年齢の数値入力欄にはdisabled属性があるため、:enabledセレクターの対象外となり、デフォルトの見た目のまま表示されます。

補足：:disabledセレクターとの使い分け

逆に、無効化された要素だけをスタイルしたい場合は: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-