SCRIPT CSS
ZANETTE
MARCO
CSS
Stile select con css3 appearance
In questo tutorial vi spiegherò come grazie alla nuova proprietà introdotta dai css3 appearance è possibile
modificare lo stile di un select solo attraverso i css.
Riporto qui sotto un esempio e il codice utlizzato.
- <style type="text/css">
- #selectStyle {
- -webkit-appearance: none;
- appearance: none;
- width: 250px;
- height: 50px;
- cursor: pointer;
- background-image: url(images/freccia_select.png);
- vertical-align:middle;
- background-position:right;
- background-repeat:no-repeat;
- border:solid 1px #0c7b9b;
- padding:5px;
- font-size:16px;
- }
- </style>
- <select id="selectStyle">
- <option>voce 1</option>
- <option>voce 2</option>
- </select>
Come avete visto con poche righe di codice css è possibile modificare lo stile di un select
grazie alla proprietà appearance dei css3, creandone uno
personalizzato secondo le propie esigenze e il proprio stile.
Va ricordato che attualmente la proprietà css3 appearance, utilizzata in questo modo,
è completamente supportata solo in Chrome e Safari.