Stili dei controlli dei moduli

In questo modulo imparerai ad applicare gli stili ai controlli del modulo e ad abbinarli agli altri stili del sito.

Aiuta gli utenti a selezionare un'opzione

Elemento <select>

Gli stili predefiniti di un elemento <select> non hanno un aspetto ottimale e non sono coerenti tra i browser.

Innanzitutto, cambiamo le frecce.

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

Per rimuovere le frecce predefinite di un elemento <select>, utilizza la proprietà CSS appearance. Per mostrare la freccia di tua scelta, definisci la freccia come background.

Dovresti inoltre modificare font-size impostandolo almeno su 1rem (che per la maggior parte dei browser ha un valore predefinito di 16 px) per l'elemento <select>. In questo modo si impedirà lo zoom di una pagina su iOS Safari quando viene attivato il controllo modulo.

Ovviamente puoi anche modificare i colori degli elementi per adattarli a quelli del brand. Dopo aver aggiunto altri stili per gli spazi, :hover e :focus, l'aspetto dell'elemento <select> è ora coerente in tutti i browser.

Guarda questa demo nella demo di Stile di un Select Like It's 2019

E l'elemento <option>? L'elemento <option> è un cosiddetto elemento sostituito la cui rappresentazione non rientra nell'ambito di CSS. Al momento, non puoi applicare uno stile all'elemento <option>.

Caselle di controllo e pulsanti di opzione

L'aspetto di <input type="checkbox"> e <input type="radio"> varia in base al browser.

Apri la demo su vari browser per vedere la differenza. Vediamo come verificare che le caselle di controllo e i pulsanti di opzione corrispondano al tuo brand e abbiano lo stesso aspetto di tutti i browser.

In passato, gli sviluppatori non potevano applicare direttamente lo stile dei controlli <input type="checkbox"> e <input type="radio">. Ora le caselle di controllo e i pulsanti di opzione possono essere definiti tramite i relativi pseudo elementi. In alternativa, puoi utilizzare la seguente tecnica di sostituzione per creare stili personalizzati per questi elementi.

In primo luogo, nascondi visivamente la casella di controllo e il pulsante di opzione predefiniti.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

È importante utilizzare position: absolute insieme a opacity: 0 anziché display: none o visibility: hidden in modo che i controlli siano nascosti solo visivamente. Ciò garantisce che siano ancora esposte dall'albero di accessibilità del browser. Tieni presente che potrebbe essere necessario applicare ulteriori stili per garantire che i controlli del modulo visivamente nascosti rimangano posizionati "sopra" gli elementi sostitutivi. In questo modo sarà possibile garantire che passando il mouse sopra uno di questi elementi, quando è attivo uno screen reader o quando si utilizzano dispositivi touch con screen reader abilitati, i controlli visivamente nascosti saranno rilevabili tramite l'esplorazione tramite tocco e l'indicatore di messa a fuoco visibile dello screen reader venga generalmente visualizzato nella posizione in cui i controlli vengono visualizzati sullo schermo.

Per mostrare le caselle di controllo e i pulsanti di opzione personalizzati, hai a disposizione diverse opzioni. Puoi utilizzare lo pseudo-elemento CSS ::before e la proprietà background CSS oppure immagini SVG incorporate.

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

Il CSS offre molte possibilità per assicurarsi che le caselle di controllo e i pulsanti di opzione corrispondano agli stili del brand.

Scopri di più sugli stili di <input type="checkbox">, <input type="radio"> e sugli stili delle caselle di controllo personalizzate.

Come utilizzare i colori del sito per i controlli del modulo

Vuoi integrare gli stili del sito nei controlli del modulo con una sola riga di codice? A questo scopo, puoi utilizzare la proprietà CSS accent-color.

checkbox {
  accent-color: orange;
}

Verifica le tue conoscenze

Verifica le tue conoscenze su come definire i controlli del modulo

Risorse

• Colore intenso
• Stile dell'elemento <select>
• Accessibilità dei controlli dei moduli con stili
• Apri UI