how do I change the background and text color of items withi

Topic: how do I change the background and text color of items within mdb-select?

waffaru free asked 5 years ago

Hey,

I've this issue where currently my Select uses values from a custom skin to change its text and background color. I wish to override this manually in my styles.scss but I'm not sure what elements/classes to target.

Here's an image of what it looks like now:

In this instance, I wish to change it so the background is close to black and its text close to white.

Thanks for any help you can throw my way!

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear @waffaru

Please check the @ak.leimrey answer. If this won't resolve your problem, please let me know, and I'll try to help you with some code.

Best Regards,

Damian

Add comment

ak.leimrey pro answered 5 years ago

8 0 Best answer

Something along those lines...At least that's how I changed the appearance of my select boxes <div><pre class="code-toolbar grey lighten-2 p-3 mb-3">.themeSelect {                                     margin-right: 20px !important;                                     min-width: 300px;                                     mdb-select mdb-select-dropdown .dropdown-content .options {                                         // max-height: 50vh !important;                                         background-color: black                                     }                                     mdb-select mdb-select-dropdown .dropdown-content li > span {                                         color: #d4d4d4 !important;                                         font-size: small;                                         padding: 0;                                         margin-left: 5px;                                                                              }                                 }</pre></div>

Please insert min. 20 characters.

Something along those lines...At least that's how I changed the appearance of my select boxes

.themeSelect {

                                    margin-right: 20px !important;

                                    min-width: 300px;

                                    mdb-select mdb-select-dropdown .dropdown-content .options {

                                        // max-height: 50vh !important;

                                        background-color: black

                                    }

                                    mdb-select mdb-select-dropdown .dropdown-content li > span {

                                        color: #d4d4d4 !important;

                                        font-size: small;

                                        padding: 0;

                                        margin-left: 5px;

                                        

                                    }

                                }

waffaru free commented 5 years ago

Thanks, this answer helped me!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.0.0
Device: PC
Browser: Firefox, Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

waffaru

35Support score
2Questions 2Answers 0Snippets