¿Hay alguna forma de aplicar un estilo CSS en las opciones de la lista de datos HTML5?

84

Me gustaría modificar la forma en que se muestra la lista de las diferentes opciones de mi lista de datos. ¿Es posible aplicarle algunas propiedades CSS?

<input list="languages" id="language_id">
<datalist id="languages">
      <option value="html">HTML</option>
      <option value="java">Java</option>
      <option value="perl">Perl</option>
      <option value="php">PHP</option>
      <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

Lo intenté

option {
    background: red;
}

pero no parece funcionar.

n0n0bstan
fuente

Respuestas:

82

Al igual que seleccione los elementos, la lista de datos elemento tiene muy poca flexibilidad en el estilo. No puede diseñar ninguno de los términos sugeridos si eso es lo que estaba haciendo su pregunta.

Los navegadores definen sus propios estilos para estos elementos.

Jason Yaraghi
fuente
136
esto es tan triste
Lloyd Banks
4
Relevante: lista de extensiones CSS específicas del proveedor de Firefox (que incluye, por ejemplo, un marcador de posición, pero nada como una lista de datos): developer.mozilla.org/en-US/docs/Web/CSS/Reference/…
ANeves piensa que SE es malvado
Ojalá hubiera una manera de alterar constantemente los estilos de los elementos nativos, como las listas de datos y las selecciones
t3__rry
-6

tratar:

input[list]
{
  background: red;
}
jarrodeano
fuente
5
En Firefox 30, input[list]aplica estilo al cuadro de texto, pero no a la lista. En IE 11, aplica estilo al cuadro de texto y a la lista.
Darren Griffith