How to style the option of an html “select” element?

后端未结

关注

 18  2454

迷失自我 2020-11-21 05:09

Here\'s my HTML:

if you're using Bootstrap and/or jquery. I understand this isn't what the original poster is asking but I thought I could help others that stumble onto this question.

You can still achieve the goal of styling each separately, but may need to apply some style to the

Select2 (JS lib)

There's a library you can use called Select2.

Dependencies: Library is JS + CSS + HTML only (does not require JQuery).

Compatibility: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+

Demo: https://select2.org/getting-started/basic-usage

There's also a bootstrap theme available.

No Bootstrap example:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

Bootstrap example:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

MDBootstrap ($ & Bootstrap & JQuery)

If you have extra money, you can use a premium library MDBootstrap. (This is an entire UI Kit, so it's not light)

This allows you to style your select and option elements using the Material design.

There is a free version, but it won't allow you to use the pretty Material design!

Dependencies: Bootstrap 4, JQuery,

Compatibility: "supports the latest, stable releases of all major browsers and platforms."

Demo: https://mdbootstrap.com/docs/jquery/forms/select/#color