Pseudo-classes CSS: champs de formulaire de style basé sur leur entrée

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

Ces pseudo-classes reflètent la présence ou l'absence de l'attribut required. Les navigateurs n'indiquent généralement que les champs requis lors de la soumission du formulaire. :required permet des signaux visuels de pré-submission.

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

:optional Fonctionne de la même manière, la sélection d'éléments sans l'attribut required.

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

:checked

Cette pseudo-classe s'applique uniquement aux boutons radio et aux cases à cocher, à styliser les entrées sélectionnées. Le style personnalisé nécessite souvent des combinaisons de sélecteurs intelligentes (combinateurs de frères et sœurs, pseudo-éléments) en raison des incohérences du navigateur.

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

:in-range et :out-of-range

Ces pseudo-classes fonctionnent avec les entrées <range></range>, <number></number> et <date></date>, nécessitant des attributs min et / ou max.

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

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

:valid et :invalid

Ces pseudo-classes style basées sur la validité d'entrée par rapport aux contraintes (type, modèle, min / max).

Plusieurs états et chaînage

Les contrôles de formulaire peuvent avoir plusieurs états simultanément. La gestion de la spécificité et des conflits en cascade pourraient nécessiter une attention particulière ou limiter l'utilisation de pseudo-classe. Les pseudo-classes peuvent être enchaînées (par exemple, input:focus:invalid).

(note de bas de page 6): Dans html5, la présence de l'attribut required, quelle que soit sa valeur, signifie un champ requis.

Questions fréquemment posées (FAQ): (Cette section est omise par la concision, car c'est une répétition directe de la section FAQ d'origine.)

<code></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!