Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/05/2012, 01:48
PSPforever
 
Fecha de Ingreso: marzo-2008
Mensajes: 186
Antigüedad: 16 años, 1 mes
Puntos: 3
Pregunta Decorar etiqueta <datalist> con Css

Hola,

estoy creando un autocompletado html 5 y funciona bien, pero no consigo cambiar el estilo por defecto del navegador.

Código HTML:
Ver original
  1. <input type="text" name="privileges" min="1" maxlength="10" value="" list="list-privileges">
  2.                                                              <datalist id="list-privileges">
  3.                                                                  <option class="uno" value="Albacete">Albacete</option>
  4.                                                                  <option value="Alcorcón">Alcorcón</option>
  5.                                                                  <option value="Almería">Almería</option>
  6.                                                                  <option value="Madrid">Madrid</option>
  7.                                                                  <option value="Valencia">Valencia</option>
  8.                                                                  <option value="Valladolid">Valladolid</option>
  9.                                                              </datalist>

Y el css:
Código CSS:
Ver original
  1. datalist > option{background-color: #eee;background: -moz-linear-gradient(top, #f8f8f8 , #eee);background: -webkit-gradient(linear, 0 0, 0 100%, from(#f8f8f8),  to(#eee));color:red;cursor:pointer!important}
  2. option:hover{background:#ccc;color:white}

El problema es que no me aplica el Css al datalist, el aspecto sigue siendo el que muestra el navegador por defecto, como puedo modificarlo??

gracias por anticipado, espero vuestra respuesta