34

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>

4

3 Answers 3

11

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.

3
  • 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.
    – RWC
    Oct 13, 2023 at 23:50
  • @RWC: not in my experience. Just tried it in Chrome, Edge, and Firefox, and none of that styling had any effect whatsoever.
    – Martha
    Oct 16, 2023 at 20:51
  • You can style datalist option, see codepen.io/r-w-c/pen/KKbYbxW
    – RWC
    Oct 17, 2023 at 14:57
7

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.