Is there a way to apply a CSS style on HTML5 datalist options?
Like select elements, the datalist element has very little flexibility in styling. You cannot style any of the suggested terms if that's what your question was asking.
Browsers define their own styles for these elements.
Styling HTML5 Datalist
See my answer here: https://stackoverflow.com/a/33526739/21655. It essentially hooks into the existing select and lets you filter it yourself.
Styling the background of a datalist
datalist
elements unfortunately cannot be styled directly. They receive their style by the current browser. See Is there a way to apply a CSS style on HTML5 datalist options?
Styling is not Working on option of datalist
you can customise the datalist using CSS but you'll have to disable/ignore the OOB datalist functionality and rewrite the functionality using JavaScript and the result is below:
input.onfocus = function() {
browsers.style.display = 'block';
input.style.borderRadius = "5px 5px 0 0";
};
for (let option of browsers.options) {
option.onclick = function() {
input.value = option.value;
browsers.style.display = 'none';
input.style.borderRadius = "5px";
}
};
input.oninput = function() {
currentFocus = -1;
var text = input.value.toUpperCase();
for (let option of browsers.options) {
if (option.value.toUpperCase().indexOf(text) > -1) {
option.style.display = "block";
} else {
option.style.display = "none";
}
};
}
var currentFocus = -1;
input.onkeydown = function(e) {
if (e.keyCode == 40) {
currentFocus++
addActive(browsers.options);
} else if (e.keyCode == 38) {
currentFocus--
addActive(browsers.options);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (browsers.options) browsers.options[currentFocus].click();
}
}
}
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("active");
}
}
input {
font-size: 18px;
padding: 5px;
height: 35px;
width: 350px;
border: 1px solid #000;
outline: none;
border-radius: 5px;
color: #000;
/* border-bottom: none; */
}
datalist {
position: absolute;
background-color: white;
border: 1px solid #000;
border-radius: 0 0 5px 5px;
border-top: none;
width: 350px;
padding: 5px;
}
option {
background-color: white;
padding: 4px;
color: #000;
margin-bottom: 1px;
font-size: 18px;
cursor: pointer;
background: #eeeeee
}
option:hover,
.active {
background-color: red;
}
<input autocomplete="off" role="combobox" list="" id="input" name="browsers">
<!-- Its important that you keep list attribute empty to hide the default dropdown icon and the browser's default datalist -->
<datalist id="browsers" role="listbox">
<option value="Chrome">Chrome</option>
<option value="Safari">Safari</option>
<option value="Microsoft Edge">Microsoft Edge</option>
</datalist>
Related Topics
How to Set the Width of Select Box Options
Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto
Remove Padding from Columns in Bootstrap 3
Vertical Align Center in Bootstrap 4
Center a Column Using Twitter Bootstrap 3
Center Content in Responsive Bootstrap Navbar
How to Remove Firefox'S Dotted Outline on Buttons as Well as Links
Css Media Queries: Max-Width or Max-Height
How to Hide Collapsible Bootstrap Navbar on Click
How to Change the Symbol When Click in CSS
How to Make a Floated Div 100% Height of Its Parent
How to Center an Absolutely Positioned Element in a Div
How to Remove Focus Border (Outline) Around Text/Input Boxes - Chrome
How to Remove the Border Highlight on an Input Text Element
Opacity of Background-Color, But Not the Text
Pure CSS to Make Font-Size Responsive Based on Dynamic Amount of Characters