How do you customize HTML select and option elements using CSS?

Question

I saw highly customized <select> an <option> element on some sites and I wonder how it was made, because clearly you can not customize a default <select> element neither an <option> element by using CSS only.

Answer 1

You are right, it is not possible yet to customize <select> or <option>, so what web developers do is that they use Javascript (often jQuery) to create new <ul> with <li>s element and to hide the <select> element and linking it with newly created <ul> element. In this newly created <ul> element, the <li>s represent hidden <option>s, so when the user clicks on the <li> item, a corresponding <option> is selected.

What most developers usually do is that they use Boostrap CSS framework and its jQuery plugin called 'Bootstrap-select', i.e. a developer downloads or imports Boostrap-select's CSS styles for <select> elements together with Bootstrap's general JS file and Bootstrap-selects's JS file. Then a developer can change the appearance of <select>s and <option>s by just simply changing the CSS inside downloaded/imported Boostrap-select's stylesheet for <select> elements.

For Boostrap's general JS file head to https://getbootstrap.com and for Bootstrap-select's CSS and JS go to https://silviomoreto.github.io/bootstrap-select/

Here is my code to demonstrate how to customize <select> an <option> with jQuery, Bootstrap and Bootstrap-select:
https://code.sololearn.com/WZFVfzQnvZ2E

Answer 2

https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select#7208814