Injected CSS tag breaks Select color scheme


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

web_ntx premium asked 12 months 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
`../mdb.pro.scss`
*/

.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


Wojciech Staniszewski staff answered 12 months ago

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

If not, try like this:

.select-input.focused~.select-label {
    color: #1266f1 !important;
}

web_ntx premium commented 12 months 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 11 months ago

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


web_ntx premium commented 11 months ago

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


Wojciech Staniszewski staff commented 11 months ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No