CSS擬似クラス：入力に基づいたスタイリングフォームフィールド

<code class="language-html"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173993023124148.jpg" class="lazy" alt="CSS Pseudo-classes: Styling Form Fields Based on Their Input ">

**Key Concepts: Styling Form Fields with CSS Pseudo-Classes**

This article explores CSS pseudo-classes specifically designed for styling form fields based on user input, field requirements, and enabled/disabled states.  We'll cover how to leverage these selectors to enhance user experience and provide clear visual feedback.

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173993023288237.jpg" class="lazy" alt="CSS Pseudo-classes: Styling Form Fields Based on Their Input ">

*This section is adapted from "CSS Master" by Tiffany B. Brown.*

Let's examine CSS pseudo-classes tailored for form fields and their inputs. These selectors enable styling based on input validity, required fields, and enabled/disabled status.  These pseudo-classes are inherently form-specific, reducing the need for extensive scoping. However, targeted selectors remain beneficial for differentiating styling across various form control types.

**`:enabled` and `:disabled`**

These pseudo-classes target elements with or without the `disabled` HTML5 attribute. This applies to input controls (e.g., `<input>`, `<select>`, `<button>`), and `<fieldset>` elements.  Form elements are enabled by default; the `disabled` attribute toggles this state.  `:enabled` selects elements lacking the `disabled` attribute, while `:disabled` selects elements possessing it.

```css
button:disabled {
    opacity: 0.5;
}</fieldset></button></select></code>

:requiredおよび:optional

これらの擬似クラスは、required属性の有無を反映しています。 ブラウザは通常、フォームの提出時に必要なフィールドのみを示します。 :requiredでは、提出前の視覚的なキューが許可されています。

<code class="language-css">input:required {
    border: 1px solid #ffc107;
}</code>

:optional同様に動作し、required属性なしで要素を選択します。

<code class="language-css">select:optional {
    border: 1px solid #ccc;
}</code>

:checked

この擬似クラスは、ラジオボタンとチェックボックスにのみ適用され、選択した入力のスタイリング。 カスタムスタイリングには、ブラウザの矛盾のために巧妙なセレクターの組み合わせ（兄弟組み合わせ、擬似要素）が必要です。

<code class="language-css">[type=radio]:checked + label {
    font-weight: bold;
    font-size: 1.1rem;
}</code>

および:in-range :out-of-range これらの擬似クラスは、

、

、および<range></range>入力で動作します。 <number></number> <date></date> minmax

<code class="language-css">:out-of-range {
    background: #ffeb3b;
}

:in-range {
    background: #fff;
}</code>

および

制約に対する入力の妥当性に基づくこれらの擬似クラススタイル（タイプ、パターン、最小/最大）。 :valid :invalid

複数の状態とチェーン

フォームコントロールは、複数の状態を同時に持つことができます。 特異性とカスケード競合を管理するには、慎重に検討するか、擬似クラスの使用を制限する必要がある場合があります。 擬似クラスは連鎖することができます（例えば、

）。

（脚注6）：属性の存在は、必要なフィールドを意味します。

input:focus:invalidよくある質問（FAQ）：

（このセクションは、元のFAQセクションの直接の繰り返しであるため、簡潔に省略されています。）

以上がCSS擬似クラス：入力に基づいたスタイリングフォームフィールドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。