Is it possible to style the drop-down suggestions when using HTML5 <datalist>?

Question

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?

* {margin:0; padding:0; font-family: arial, sans-serif; font-size: 40px; font-weight: bold; color: #444;}  body {height:100%; background:#F4F3EF;}  .select select, .input input {background: transparent; width: 220px; overflow:hidden; height: 65px; padding-left: 5px;      padding-bottom: 5px; -webkit-appearance: none; -moz-appearance:none; appearance:none; border:none; cursor:pointer;}  .select select {padding-top: 5px;}  .select, .input {float:left; width: 220px; height: 65px; margin-right: 20px; overflow: hidden; background: #ddd;      border: 1px solid #ccc;}

    <div class="select">      <select id="count">              <option value="1">A</option>              <option value="2">A pair of</option>              <option value="3">A few</option>              <option value="4">Four</option>      </select>      </div>      <div class="input">          <input type="text" id="query" list="ingredients" placeholder="lamb"></input>          <datalist id="ingredients">              <option value="lamb">              <option value="beef">              <option value="chicken">              <option value="fish">              <option value="vegetarian">          </datalist>      </div>

Answer 1

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.

Answer 2

From the best of my knowledge you cannot style the <datalist> tag. I recommend using the JQuery extension autocomplete. So you're need to include JQuery in your html document. here is a link hosted by Google: See here

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script

Note: you can get better performance by including this at the end of the document and using $(document).ready();

For example:

HTML:

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

Javascript:

$(document).ready(function() {     var arrayOfOptions = [         "Option 1",         "Option 2",         "etc"     ];      $("#input").autocomplete({source: arrayOfOptions}); }); 

note: not tested code!

Source: http://jqueryui.com/autocomplete/

You can style this similarly to how you style a nav. Here are some classes you can style:

.ui-autocomplete span.hl_results {background-color: #ffff66;} .ui-autocomplete-loading {} //the object while it's loading (in the event of Ajax, in this case would not need this one .ui-autocomplete {     max-height: 250px;     overflow-y: auto;     overflow-x: hidden;     padding-right: 5px; }  .ui-autocomplete li {font-size: 16px;} html .ui-autocomplete {     height: 250px; }