Topic: Style select options

sody free asked 1 year 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 1 year ago


You can use CSS selectors to color certain children of the Select menu. For example: https://mdbootstrap.com/snippets/standard/m-duszak/3267430#css-tab-view

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

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

sody free commented 1 year ago

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

Sami


UNNdev priority commented 1 year ago

I think it's not possible which was the motivation for my ticket https://mdbootstrap.com/support/standard/cannot-target-specific-select-wrapper-via-css/


UNNdev priority commented 1 year ago

Thinking about it again, it actually is possible by using a different container per select. See https://mdbootstrap.com/snippets/standard/kayem79/3267835#css-tab-view

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 1 year 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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