+ 2

How do i style the content in <option> tags of <datalist> using CSS ?

Styling of elements.

7th Apr 2022, 4:11 AM

Hallucinatory

2 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

7th Apr 2022, 5:29 AM

Gordon

+ 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>

7th Apr 2022, 6:03 AM

Yasin Rahnaward