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>

Purloin

I don't think its possible to style a datalist. I'll suggest you to use some type ahead plugin. – Tbilisi

That's currently the best way to go anyway as webkit and IE browsers don't support it. – Purloin

I wonder if there is a pseudo class that will allow styling – Sherrellsherrer

Possible duplicate of Is there a way to apply a CSS style on HTML5 datalist options? – Intubate

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.

Intubate

Styling datalist with CSS only is possible. in 2023, something like datalist option { font-size: 0.8em; padding: 0.3em 1em; background-color: #ccc; cursor: pointer; } works fine. – Jumbo

@RWC: not in my experience. Just tried it in Chrome, Edge, and Firefox, and none of that styling had any effect whatsoever. – Epencephalon

You can style datalist option, see codepen.io/r-w-c/pen/KKbYbxW – Jumbo

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;
}

Beacon

Answer 3

Styling datalist with CSS IS POSSIBLE, but not always. Here is a example where input with style="range" is used.

The OP wants to style the options in a dropdown, which is not possible (yet) in November 2023.

An example:

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  background: #eee;
  font-size: 1rem;
  padding: 10px;
  border: 1px solid #000;
}

.slider-container {
  display: flex;
  gap: 10px;
  height: 100%;
  margin: 10px;
}

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 300px;
}

#drGradeSlider {
  height: 300px;
  width: 30px;
  border: 1px solid #000;
}

input[type="range"] {
  appearance: slider-vertical;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(red, yellow, green);
  accent-color: #023b6d;
  cursor: pointer;
  width: 1rem;
  border-radius: 3rem;
}

input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  background: #023b6d;
  transform: scale(1.5);
  cursor: grab;
}

input[type="range"]:hover::-webkit-slider-thumb {
  background: #023b6d;
}

input[type=range]::-webkit-slider-thumb:active {
    cursor: -webkit-grabbing;
}

<main id="main">
  
  <h4>Diabetic Retinopathy Grade</h4>
  <div class="slider-container">
  
  <input id="drGradeSlider" type="range" list="tickmarks" class="vertical-slider" min="0" max="5" step="1" value="0">

  <datalist id="tickmarks">
    <option value="5" label="PDR"></option>
    <option value="4" label="Severe NPDR"></option>
    <option value="3" label="Moderate NPDR"></option>
    <option value="2" label="Mild NPDR"></option>
    <option value="1" label="No retinopathy"></option>
    <option value="0" label="Not gradable"></option>
  </datalist>
  </div>                                  
</main>

Ans see here a differently styled version of the datalist:

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  background: #eee;
  font-size: 1rem;
  padding: 10px;
  border: 1px solid #000;
}

.slider-container {
  display: flex;
  gap: 10px;
  height: 100%;
  margin: 10px;
}

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 300px;
}

#drGradeSlider {
  height: 300px;
  width: 30px;
  border: 1px solid #000;
}

input[type="range"] {
  appearance: slider-vertical;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(red, yellow, green);
  accent-color: #023b6d;
  cursor: pointer;
  width: 1rem;
  border-radius: 3rem;
}

input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  background: #023b6d;
  transform: scale(1.5);
  cursor: grab;
}

input[type="range"]:hover::-webkit-slider-thumb {
  background: #023b6d;
}

input[type=range]::-webkit-slider-thumb:active {
    cursor: -webkit-grabbing;
}

datalist option {
  color: #F00;
  font-size: 0.8em;
  padding: 0.3em 1em;
  background-color: #ccc;
  cursor: pointer;
}

<main id="main">
  
  <h4>Diabetic Retinopathy Grade</h4>
  <div class="slider-container">
  
  <input id="drGradeSlider" type="range" list="tickmarks" class="vertical-slider" min="0" max="5" step="1" value="0">

  <datalist id="tickmarks">
    <option value="5" label="PDR"></option>
    <option value="4" label="Severe NPDR"></option>
    <option value="3" label="Moderate NPDR"></option>
    <option value="2" label="Mild NPDR"></option>
    <option value="1" label="No retinopathy"></option>
    <option value="0" label="Not gradable"></option>
  </datalist>
  </div>                                  
</main>

Jumbo