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
Come puoi rimuovere lo stile nativo della piattaforma dei controlli dei moduli?
revert: all;
.appearance: none;
.appearance: revert;
.revert: appearance;
.