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!


Damian Gemza staff answered 5 years ago


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


ak.leimrey pro answered 5 years ago


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!



Please insert min. 20 characters.

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