Diseño Web HTML5 CSS3 Javascript

Hola esto va a ser una entrada corta, os voy a enseñar como cambiamos la flecha en un formulario con un elemento SELECT –

Aqui esta el ejemplo ya acabado

OK tenemos nuestro FORM (cuestionario)  con un elemento SELECT

‹form action="" method="post" name="form1" id="form1"
‹div class="flechita"›
‹select name="select" class="fondocasilla" id="select"›
‹option›All locations‹/option›
‹option value="VF"›Vejer de la Frontera‹/option›
‹option value="TF"›Tarifa‹/option›
‹option value="CA"›Cdiz‹/option›
‹option value="MA"›Mlaga‹/option›
‹/div›
‹/select›
‹/form›

Como podeis ver he añadido un DIV para controlar todos los elemento de la caja del SELECT & ahora el CSS –

.flechita select {
 border: 1px solid #ccc;
 background: URL(../imagenes/arrow.png) no-repeat 298px 3px #fff !important;
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 }

Las lineas mas importantes aqui son la del fondo & la de quitar la flecha – para quitar la flecha que viene por defecto según el navegador usamos el APPEARANCE:NONE (creo que en IE antiguos habra problemas a quien le interesa ese tema…