+ 4

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

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.

3rd Feb 2018, 2:39 PM
Lena Tempenen
2 Respostas
+ 2
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
3rd Feb 2018, 3:41 PM
Pham The Anh
Pham The Anh - avatar
+ 5
https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select#7208814
3rd Feb 2018, 2:52 PM
Vukan
Vukan - avatar