Stili dei controlli dei moduli

In questo modulo imparerai ad applicare uno stile ai controlli del modulo e ad abbinarlo agli altri stili del tuo sito.

Aiuta gli utenti a selezionare un'opzione

Elemento <select>

Gli stili predefiniti di un elemento <select> non hanno un aspetto soddisfacente e non hanno un aspetto coerente tra i browser diversi.

Per prima cosa 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.

Devi anche cambiare il 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 verrà impedito lo zoom di una pagina in Safari in iOS quando il controllo del modulo è attivo.

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

Guarda la demo nella demo Stilizzare un video selezionato "Mi piace" nel 2019

E l'elemento <option>? L'elemento <option> è un cosiddetto elemento sostituito la cui rappresentazione non rientra nell'ambito di CSS. Al momento della stesura del presente documento, 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 da browser a browser.

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

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

Per prima cosa, 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 in combinazione con opacity: 0 anziché display: none o visibility: hidden in modo che i controlli siano solo visivamente nascosti. In questo modo si garantisce che siano ancora visibili dal browser albero dell'accessibilità. Tieni presente che potrebbero essere necessari ulteriori stili per garantire che gli elementi visivamente nascosti i controlli del modulo rimangono posizionati "in alto" dei loro elementi sostitutivi. In questo modo avrai la certezza che, passando il mouse sopra uno di questi elementi, quando è attivo uno screen reader o quando si utilizzano dispositivi touch con screen reader attivati, i controlli visivamente nascosti verranno visualizzati saranno rilevabili tramite l'esplorazione al tocco e l'indicatore di messa a fuoco visibile dello screen reader solitamente appare 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 usare lo pseudoelemento 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 garantire che le caselle di controllo e i pulsanti di opzione corrispondano agli stili del brand.

Scopri di più su lo stile di <input type="checkbox"> e <input type="radio"> e stili delle caselle di controllo personalizzate.

Come utilizzare i colori del sito per i controlli del modulo

Vuoi integrare gli stili del tuo sito nei controlli del modulo con un'unica 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 dei controlli degli stili dei moduli

Risorse

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