Cambiar el formato de un campo Select con CSS

Podemos cambiar la apariéncia de un select de un formulario utilizando CSS. Ademas podemos poner a cada option un formato distinto.
En este caso haremos que todos los option tengan el mismo formato y color de letra y varie el fondo.

Para eso primero, definiremos el tag option con los valores comunes para todos:

        option
        {
                    font-family: verdana;
                    font-size: 11px;
                    color: #ffffff;
        }

Ahora definimos dos estilos que vinculamos al option que definiran su color de fondo

        option.bg1 {background-color: #FFCC66}
        option.bg2 {background-color: #FFCC99}

Colocaremos los class en el option

        <select>
            <option class="bg1">Option 1</option>
            <option class="bg2">Option 2</option>
            <option class="bg1">Option 3</option>
            <option class="bg2">Option 4</option>
            <option class="bg1">Option 5</option>
            <option class="bg2">Option 6</option>
        </select>

Usuarios que han visto este tema también han visto...

- Hacks en CSS útiles para Internet Explorer
- Evitar que una página se imprima en CSS
- CSS y las tablas
- Menú rollover en CSS sin JavaScript
- Bordes Punteados con CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento