Topic: Injected CSS <style> tag breaks Select color scheme
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;
}
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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