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

Question

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.

Comments

[totymedli]

Possible duplicate of Is it possible to style the drop-down suggestions when using html5 datalist?

[ANeves]

Relevant: list of Firefox vendor-specific CSS extensions (which includes e.g. placeholder, but nothing like datalist): developer.mozilla.org/en-US/docs/Web/CSS/Reference/…

[Darren Griffith]

In Firefox 30, input[list] styles the textbox, but not the list. In IE 11, it styles the textbox and the list.

[t3__rry]

I wish there was a way to consistantly alter native element's styles such as datalists and selects

[haldo]

Why are you using table based layout?

[Samz]

This will not working for change the background color of the datalist but can use for change the background color of the input

[Sanan Ali]

The original question is how to apply styles not what are the alternatives.