¿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

3

Posible duplicado de ¿Es posible modificar el estilo de las sugerencias desplegables cuando se usa la lista de datos html5?

— totymedli

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