Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 489
n0n0bstan Avatar asked Dec 03 '12 23:12

n0n0bstan


People also ask

Is Datalist tag in HTML5?

The datalist tag is introduced in HTML5. The <datalist> tag should be used with an <input< element that contains a "list" attribute. The value of "list" attribute is linked with the datalist id.

How do I display the text in Datalist HTML5 and not the value?

To show only the text value of the option in the dropdown, we use the inner text for it and leave out the value attribute. The actual value that we want to send along is stored in a custom data-value attribute: To submit this data-value we have to use an <input type="hidden"> .

How does Datalist work HTML?

Definition and Usage. The <datalist> tag specifies a list of pre-defined options for an <input> element. The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.


1 Answers

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.

like image 160
Adrift Avatar answered Sep 17 '22 17:09

Adrift