CSS accent-color
La proprietà CSS accent-color (CSS3) modifica il colore degli elementi di controllo
La proprietà accent-color consente di personalizzare il colore degli elementi di controllo come checkbox, radio button, slider e progress bar. È particolarmente utile per armonizzare lo stile di moduli e componenti nativi del browser con il design complessivo del sito.
Sintassi
Significato dei valori principali:
-
color: definisce il colore dell'accento per gli elementi di controllo. Può essere espresso in formato esadecimale (
#007BFF), RGB (rgb(0, 123, 255)), HSL (hsl(211, 100%, 50%)) oppure tramite parole chiave comeblue,green,rebeccapurple, ecc. -
auto: (valore predefinito) il colore di accento sarà determinato dal sistema o dallo user agent.
Esempio proprietà: accent-color
Codice Esempio: accent-color
.accent-color-example input[type="checkbox"],
.accent-color-example input[type="radio"],
.accent-color-example progress {
accent-color: #e63946;
}.accent-color-example {
font-size: 18px;
padding: 20px;
background-color: #f1faee;
border: 2px dashed #e63946;
border-radius: 8px;
}
Contenuto Esempio: accent-color
Esempio di utilizzo di accent-color
In questo esempio, accent-color viene utilizzata per modificare il colore di checkbox, radio button e barra di avanzamento:
CSS e HTML per personalizzare il colore degli elementi di form:
<style>
.accent-color-example input[type="checkbox"],
.accent-color-example input[type="radio"],
.accent-color-example progress {
accent-color: #e63946; /* rosso acceso */
}
.accent-color-example {
font-size: 18px;
padding: 20px;
background-color: #f1faee;
border: 2px dashed #e63946;
border-radius: 8px;
}
</style>
<div class="accent-color-example">
<label><input type="checkbox" checked> Opzione A</label><br><br>
<label><input type="radio" name="group" checked> Scelta 1</label><br><br>
<progress value="70" max="100"></progress>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
