Style select options

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

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

sody pro premium priority commented 3 years 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 pro premium priority commented 3 years 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 pro premium priority commented 3 years 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 3 years ago

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

---