Czy istnieje sposób na zastosowanie stylu CSS w opcjach datalist HTML5?

87

Chciałbym zmodyfikować sposób wyświetlania listy różnych opcji mojego datalist. Czy można zastosować na nim jakieś właściwości 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>

próbowałem

option {
    background: red;
}

ale nie wydaje się działać.

n0n0bstan
źródło

Odpowiedzi:

84

Podobnie jak elementy select , element datalist ma bardzo małą elastyczność stylizacji. Nie możesz stylizować żadnego z sugerowanych terminów, jeśli o to chodziło w Twoim pytaniu.

Przeglądarki definiują własne style dla tych elementów.

Jason Yaraghi
źródło
4
Istotne: lista rozszerzeń CSS specyficznych dla producenta Firefoksa (która zawiera np. Symbol zastępczy, ale nie przypomina datalist): developer.mozilla.org/en-US/docs/Web/CSS/Reference/ ...
ANeves uważa, że ​​SE jest zły
Chciałbym, żeby istniał sposób na ciągłą zmianę stylów elementów natywnych, takich jak datalists i selects
t3__rry
-6

próbować:

input[list]
{
  background: red;
}
jarrodean
źródło
5
W przeglądarce Firefox 30 input[list]stylizuje pole tekstowe, ale nie listę. W IE 11 stylizuje pole tekstowe i listę.
Darren Griffith