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ć.


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.


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;
}

5
W przeglądarce Firefox 30 input[list]stylizuje pole tekstowe, ale nie listę. W IE 11 stylizuje pole tekstowe i listę.
Darren Griffith
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.