How to style the option of an html "select" element?

html

responsive-design

web-development

accessibility

byAnton Shumikhin·Jan 5, 2025

When it comes to styling HTML <select> options, CSS alone can't get the job done due to inherent browser limitations. The winning strategy? Employ a JavaScript-based custom dropdown. Now, the trick is to hide the native <select> and simulate its functionality with fully stylable HTML building blocks like div and span.

Here's a quick code sketch of such a custom dropdown:

<div class="custom-select" onclick="this.classList.toggle('open')">
  <span>Click me, I dare you</span>
  <div class="options">
    <div data-value="opt1">Option 1</div>
    <div data-value="opt2">Option 2</div>
    <div data-value="opt3">Option 3</div>
  </div>
</div>

With the skeleton in place, it's time to spice things up with some alluring CSS:

.custom-select {
  cursor: pointer; /* Wanna click it now? */
}
.custom-select .options {
  display: none; /* I'm the magic trick */
  position: absolute; /* Here, there, everywhere */
}
.custom-select.open .options {
  display: block; /* Magic in action */
}

This base setup is your playfield for creating an alluring and effortless dropdown menu. You can fine-tune it with extra CSS and JavaScript, to precisely match your envisioned design and functionality.

Embracing replacement plugins

Occasionally, the easiest path involves standing on the shoulders of giants. By using prebuilt plugins, such as Bootstrap Select or Select2, we can happily disregard the limitations of native <select> styling. That's because these plugins are smart enough to use regular HTML elements which roguely ignore the rules applying to <select>.

Tuning in on select2

When crafting more cutting-edge applications, Select2 takes the crown. It's totally independent from jQuery and sports a sleek Bootstrap theme. The trick up its sleeve? Oh, just a couple of enhanced functionalities like searching, tagging, and remote data sets.

Material-crafted beauty with MDBootstrap

For those among you on the hunt for Material Design aesthetics, MDBootstrap has got you covered! It employs Bootstrap 4 to inject some freshness and modern UI/UX into your drop-down menus.

Bear in mind after picking one of these libraries, otherwise, you'll need to check the dependencies in your project and consider the free versions or demos prior to any investments.

The JavaScript way for dynamic customization

Sometimes, all you need is a little bit of JavaScript or jQuery magic to mimic the select functionality using your own HTML/CSS structures. The key is keeping your custom dropdown in sync with the original element, preserving the essence of your form's functionality and data collection.

Keeping values in check with JavaScript

Now listen closely, maintain your JavaScript so that it updates the value of the hidden native <select> when a user interacts with the custom dropdown. By doing this, you synchronize the values ensuring your form submissions include all the correct goodies.

Remembering the accessible web

When cooking up your custom dropdown, don't forget about your friend, accessibility. Keep the keyboard navigation and screen reader antics on par with the standards of a typical <select>.

Troubleshooting tips and tricks

Down the road with custom dropdowns, don't get surprised by a few roadblocks. Here's how to navigate some common issues:

Smoothing out flickering effects

Want to avoid flickering? Either turn to CSS transitions for smoother displays or consider involving some JavaScript event handling.

Z-index stacking woes

If custom dropdowns seem a bit off in the stacking order, it's usually a z-index issue. Ensure your custom dropdown rises above the rest in the stacking order.

Following the validation script

For any JavaScript validations in your forms, prepare them for the custom dropdown, not just the original <select>. It's all about maintaining the integrity of your forms.

explain-codes / Html / How to style the option of an html "select" element?

Linked

Problem with `` and `:after` with CSS in WebKit



How to change the button text of ``?



How to add images in select list?



Change select box option background color



Creating a select box with a search option

