CSS-Pseudoklassen: Styling-Formfelder basierend auf ihrer Eingabe

<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 und :optional

Diese Pseudoklassen spiegeln das Vorhandensein oder Fehlen des required -attributs wider. Browser geben normalerweise nur die erforderlichen Felder bei der Einreichung von Formular an. :required Ermöglicht visuelle Hinweise vor der Untersuchung.

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

:optional funktioniert ähnlich und auswählt Elemente ohne das Attribut required.

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

:checked

Diese Pseudoklasse gilt nur für Optionsfelder und Kontrollkästchen und stylen ausgewählte Eingänge. Das benutzerdefinierte Styling erfordert häufig clevere Auswahlkombinationen (Geschwisterkombinatoren, Pseudo-Elemente) aufgrund von Browser-Inkonsistenzen.

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

:in-range und :out-of-range

Diese Pseudoklassen funktionieren mit <range></range>, <number></number> und <date></date> Eingängen, die min und/oder max Attribute erfordern.

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

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

:valid und :invalid

Diese Stilklassenstil basierend auf der Gültigkeit der Eingabe gegen Einschränkungen (Typ, Muster, min/max).

Mehrere Zustände und Verkettung

Formelemente können gleichzeitig mehrere Zustände haben. Die Verwaltung von Spezifität und Kaskadierung von Konflikten kann eine sorgfältige Prüfung erfordern oder die Verwendung der Pseudoklasse einschränken. Pseudoklassen können gekettet werden (z. B. input:focus:invalid).

(Fußnote 6): In HTML5 bedeutet das Vorhandensein des required -attributs unabhängig von seinem Wert ein erforderliches Feld.

häufig gestellte Fragen (FAQ): (Dieser Abschnitt ist für die Kürze weggelassen, da es sich um eine direkte Wiederholung des ursprünglichen FAQ -Abschnitts handelt.)

<code></code>

Das obige ist der detaillierte Inhalt vonCSS-Pseudoklassen: Styling-Formfelder basierend auf ihrer Eingabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!