Topic: Style select options

sody priority asked 2 years ago

Expected behavior

I am searching for option to style optiobs inside select:

  1. Style color option for example if select is for "Status".. and options are Closed and Open.. i want Open to be in red color and Closed to be in Green color.

  2. Style backgroumd for selected option(s) rather than the grey background.

Actual behavior

I couldn't find any docs about these 2.

Michał Duszak staff answered 2 years ago

You can use CSS selectors to color certain children of the Select menu. For example:

.select-option:nth-child(1) > .select-option-text {
  color: red;

.select-option:nth-child(2) > .select-option-text {
  color: green;

sody priority commented 2 years ago

How do i select these options for specific select id (aka id='status') and not general for all selects in all pages ?


UNNdev priority commented 2 years ago

I think it's not possible which was the motivation for my ticket

UNNdev priority commented 2 years ago

Thinking about it again, it actually is possible by using a different container per select. See

Or if possible, you can wrap the whole select into its own div and then target the .select-option-text of that div.

Michał Duszak staff commented 2 years ago

As @UNNdev says, use container for certain select dropdown, so that you can exclude everything else and style only certain component.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Desktop
  • Browser: Chrome
  • OS: windows10
  • Provided sample code: No
  • Provided link: No