2

I wondered if it were possible to style <datalist> (example: jsfiddle.net).

I have tried inline css, such as background-color:#F00 (x) on one of the options, but nothing happened. Has anyone succesfully styled them before? or any tutorial links, as I can't seem to find any.

Thanks for help in advance.

user3352340
  • 145
  • 2
  • 11

1 Answers1

3

Like normal dropdowns <datalists> aren't very flexible for styling. You can't style them with css. Each browser handles their own styling for the <datalist> element.

From the Tuts+ website:

Since wider browser support is only recent, there are predictable interpretations by the vendors. Firefox and Chrome use the OS theme for styling of the list options, whilst Opera will inherit certain styles (color, font-family) from the input field. Other than that, forget styling the datalist element with CSS.

Example with jquery:

HTML:

<input type='text' id='input'>

Javascript:

$(document).ready(function() {
    var arrayOfOptions = [
        "Option 1",
        "Option 2",
        "etc"
    ];

    $("#input").autocomplete({source: arrayOfOptions});
});
Kees Sonnema
  • 5,759
  • 6
  • 51
  • 106
  • But [it **is** possible to style the placeholder](http://stackoverflow.com/questions/18399592/styling-placeholder-on-firefox), which is in the same category of things. How do you know that one cannot style the datalist? – ANeves Mar 07 '14 at 11:48
  • It's not possible. It just isn't, but there is a way to work around this. You could do the same but with jquery. I will edit my answer with the jquery example. – Kees Sonnema Mar 07 '14 at 11:51