Topic: Style select options
Expected behavior
I am searching for option to style optiobs inside select:
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.
Style backgroumd for selected option(s) rather than the grey background.
Actual behavior
I couldn't find any docs about these 2.
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 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 ?
Sami
UNNdev priority commented 2 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 priority commented 2 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 2 years ago
As @UNNdev says, use container for certain select dropdown, so that you can exclude everything else and style only certain component.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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