Topic: Injected CSS <style> tag breaks Select color scheme

web_ntx premium asked 3 years ago

Expected behavior

Changing colors in MDB SCSS files for Select component should recolor component.

Actual behavior

The select label does not change color due to a style tag injected at the bottom of the HTML separate from mdb.min.css. I do not know how this style tag is being inserted.

Resources (screenshots, code snippets etc.)

This is the style tag injected into the DOM which is causing issues:

<style type="text/css">.select-input-label-active {  color: #1266f1 !important; }</style>

Here is my scss/custom/_styles.scss file:

// Your custom styles

To use, add this line
`@import './custom/styles.scss'`
to the end of the file

.select-input.focused {

  & ~ .select-label {
    color: $primary

  & ~ .form-notch .form-notch-leading {
    border-top: 2px solid $primary;
    border-bottom: 2px solid $primary;
    border-left: 2px solid $primary;

  & ~ .form-notch .form-notch-middle {
    border-color: $primary;

  & ~ .form-notch .form-notch-trailing {
    border-color: $primary;

.select-input.focused ~ .select-arrow {
  color: darken($primary, 20%);

// This is not working
.select-input-label-active {
  color: $primary !important;

wrong color label

You should try adding this style to .select-label element. This should apply the color correctly.

If not, try like this: {
    color: #1266f1 !important;

web_ntx premium commented 3 years ago

Unfortunately neither of these worked. The style tag being added is at the bottom of the DOM and has precedence.

Wojciech Staniszewski staff commented 3 years ago

Label class is not adding correctly to MDBSelect label. We will fix this in this release :)

web_ntx premium commented 3 years ago

Thank you. It would also be nice if the MDBSelect component used the $primary color by default.

Wojciech Staniszewski staff commented 3 years ago

Thanks for your suggestion. We will think about this in the next release.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No