CSS :required Pseudo Classe - Learn CSS

La pseudo-classe CSS :required corrisponde a qualsiasi controllo di modulo il cui attributo required è impostato. Usala per segnalare visivamente i campi che l'utente deve compilare prima che il modulo possa essere inviato — un piccolo asterisco, un bordo colorato o un messaggio suggerimento — in modo che le persone non raggiungano il pulsante di invio solo per essere rimbalzate indietro da un errore di validazione.

Questa pagina tratta cosa seleziona :required, come si differenzia da :optional e dalle pseudo-classi di validità, la nota sull'accessibilità che dovresti conoscere e un esempio funzionante che puoi eseguire.

Quali elementi seleziona `:required`?

:required seleziona solo gli elementi che supportano effettivamente l'attributo required e lo hanno impostato:

<input> (di un tipo che può essere obbligatorio — text, email, password, tel, url, number, date, checkbox, radio, file, ecc.)
<select>
<textarea>

Non seleziona <button>, <input type="submit">, <input type="hidden">, né alcun elemento in cui required non ha significato. La corrispondenza è dinamica: se aggiungi o rimuovi l'attributo required con JavaScript, lo stile si aggiorna immediatamente.

`:required` vs. pseudo-classi correlate

:required descrive lo stato del vincolo, non se l'utente lo ha soddisfatto. Abbinala con i giusti vicini:

Pseudo-classe	Corrisponde quando…
`:required`	il campo ha l'attributo `required`
`:optional`	il campo non ha `required`
`:valid`	il valore corrente del campo supera i vincoli
`:invalid`	il valore corrente del campo non supera i vincoli

Ogni controllo di modulo è :required o :optional, quindi puoi suddividere lo stile in modo netto tra i due. Gli stati di validità (:valid / :invalid) reagiscono man mano che l'utente digita.

Sintassi

:required {
  /* CSS declarations */
}

Di solito la si limita a un tipo di controllo specifico in modo che la regola non si propaghi ad elementi non correlati:

input:required,
select:required,
textarea:required {
  border-left: 3px solid #1c87c9;
}

Nota sull'accessibilità

Solo lo stile (colore, un bordo più spesso) non è sufficiente — gli utenti daltonici o che usano lettori di schermo potrebbero non notarlo. Mantieni l'attributo nativo required sul controllo (espone il requisito alle tecnologie assistive e attiva la validazione del browser) e rafforzalo con un'indicazione testuale visibile, come un asterisco. :required serve per il tocco visivo, non per l'informazione.

Esempio

L'esempio seguente contrassegna i campi obbligatori con un bordo inferiore blu e grigia quelli facoltativi usando :optional:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        margin: 40px auto;
        max-width: 400px;
      }
      label,
      button {
        display: block;
        width: 100%;
        margin-bottom: 1.5em;
      }
      input,
      button {
        padding: .4em 1em;
      }
      input {
        border: 1px solid #666666;
      }
      input:optional {
        background-color: #eeeeee;
        color: #666666;
      }
      input:required {
        border-bottom: 3px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:required selector example</h2>
    <div class="example">
      <form action="#">
        <label>
          <input type="text" required />Name *
        </label>
        <label>
          <input type="email" required />Email *
        </label>
        <label>
          <input type="tel" />Phone (optional)
        </label>
        <label>
          <input type="url" />Address (optional)
        </label>
      </form>
    </div>
  </body>
</html>

Provalo tu stesso »

Gli input obbligatori Name e Email ricevono la sottolineatura blu; gli input facoltativi Phone e Address ricevono lo sfondo grigio — tutto gestito dalle regole :required e :optional.

Supporto browser e specifiche

:required è supportata in ogni browser moderno e lo è da anni, quindi puoi usarla senza una soluzione alternativa. È definita in due specifiche:

Argomenti correlati

:optional — l'inverso: applica stili ai controlli senza required.
:valid e :invalid — reagiscono a se il valore inserito supera i vincoli.
:focus — combina con :required per evidenziare il campo obbligatorio attivo.
:disabled e :checked — altre pseudo-classi per lo stato dei moduli.
HTML Forms — dove si imposta l'attributo required.

Pratica

Qual è la funzione della pseudo-classe ':required' in CSS?

Seleziona ogni elemento `<input>` con un attributo 'required'Seleziona ogni elemento `<input>` senza un attributo 'required'Incorpora immagini nel file CSSViene usata per selezionare gli elementi che hanno l'attributo required nel moduloRegola la dimensione delle immagini in CSS

Quali elementi seleziona :required?

:required vs. pseudo-classi correlate