Search code examples
csshtml-datalist

Is there a way to apply a CSS style on HTML5 datalist options?

I would like to modify the way that the list of the different options of my datalist are displayed. Is it possible to apply on it some CSS properties ?

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

I tried

option {
    background: red;
}

but it does not seem to work.

Solution

  • Like select elements, the datalist element has very little flexibility in styling. You cannot style any of the suggested terms if that's what your question was asking.

    Browsers define their own styles for these elements.