New course! Every coder should learn Generative AI!
Try a free lesson+ 2
How do i style the content in <option> tags of <datalist> using CSS ?
Styling of elements.
3 Answers
+ 3
You can't style the drop down of input box because browsers default it.
The closest solution is to use JQuery "autocomplete" extension, ref:
https://stackoverflow.com/questions/10062414/is-it-possible-to-style-the-drop-down-suggestions-when-using-html5-datalist
+ 3
<options> in <datalist> isn`t flexible to handling and styling with .css, instead of <datalist> tag you can use <select> tag to create a drop-down datalist.
I hope this would be helpful for you.
<!DOCTYPE html>
<html>
<body>
<h1>The option element</h1>
<label for="color">Choose a color:</label>
<select>
<option >black</option>
<option >white</option>
<option >red</option>
<option >blue</option>
</select>
<style>
select {
font-size:30px;
color:squre;
background-color:white;
width:200px;
text-align:center;
font-family: "Lucida Console", "Courier New", monospace;
}
select option{
color:green;
}
</style>
</body>
</html>
0
You can add either inline or internal or external css
Inline:-
<datalist style="property:value"> and same with <option>
Internal:-
<head><style>
Datalist{property:value}
Option{property:value}
</style></head>
External:-
Sololearn provides adding external css without using link tag.
In css section you can write:
Datalist{property:value}
Option{property:value}
Hope it helps.
Happy coding!!
Often have questions like this?
Learn more efficiently, for free:
Hot today
Initials of name
1 Votes
post your python code here)
2 Votes
Help with homework
0 Votes
please help me emotionally
1 Votes
Logical operator
1 Votes