SCRIPT CSS
ZANETTE
MARCO
CSS
Stile checkbox con css3 appearance
In questo tutorial vi spiegherò come grazie alla nuova proprietà introdotta dai css3 appearance è possibile
modificare lo stile di un checkbox solo attraverso i css.
Riporto qui sotto un esempio e il codice utlizzato.
test
- <style type="text/css">
- #checkStyle {
- -webkit-appearance: none;
- appearance: none;
- width: 30px;
- height: 30px;
- cursor: pointer;
- background-image: url(images/default.jpg);
- vertical-align:middle;
- }
- #checkStyle:checked {
- -webkit-appearance: none;
- appearance: none;
- width: 30px;
- height: 30px;
- cursor: pointer;
- background-image: url(images/selezionato.jpg);
- vertical-align:middle;
- }
- </style>
- <input id="checkStyle" type="checkbox" /> test
Come avete visto con poche righe di codice css è possibile modificare lo stile di un checkbox
grazie alla proprietà appearance dei css3, creandone uno di completamente
personalizzato secondo le propie esigenze.
Va ricordato che attualmente la proprietà css3 appearance è completamente supportata solo in Chrome e Safari.