Is it possible to style the drop-down suggestions when using HTML5 <datalist>?
See here: http://jsfiddle.net/zemar (Must use Firefox or Opera to see)
When you click on the select, the drop-down is styled to match, but if you start typing a term from the data-list in the text box the suggestions that appear aren't styled and therefore it doesn't match the rest of the styling.
Is it possible to style the drop-down?
Answer
Styling datalist with CSS only is not possible across browsers.
Internet Explorer, Firefox, Chrome and Edge apply basic styling to the input[list] element, but neither to datalist, nor to its option child elements.
See CodePen example.
Citing from MDN “Styling HTML forms – the ugly”:
Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including
<select>,<option>,<optgroup>and<datalist>elements.
A very common way to circumvent this UI limitation is to provide a JavaScript based widget, that falls back to the HTML5 input+datalist combination for users which have JS disabled.