Topic: How to change datepicker label.active color?
How to change label's active color of mdb-date-picker ?
Resources (screenshots, code snippets etc.)
mdb-date-picker [inline]="true" id="startDatePicker" [(ngModel)]="startDate" [label]="'Start Date :'"
I want to change active color of label("Start Date :")...
It works, thank you very much!!!
// default label color
mdb-date-picker .md-form label.active {
font-size: 1rem;
color: red; // #757575
transform: translateY(-14px) scale(0.9) !important;
}
// focus label
mdb-date-picker .md-form input[type='text']:focus:not([readonly]) + label {
color: #00c853; // #4285f4
transform: translateY(-14px) scale(0.9) !important;
}
// focus input
mdb-date-picker .md-form input[type=text]:focus:not([readonly]) {
box-shadow: 0 1px 0 0 green !important;
border-bottom: 1px solid green !important;
}
For example (add this styles to your global styles.scss file):
.mydp.picker label.active {
color: red;
}
yslim free commented 4 years ago
I have tried it, but It's not working.
Arkadiusz Idzikowski staff commented 4 years ago
Sorry I didn't notice that you use inline mode. Please use this styles, it should work for both inline and modal mode:
mdb-date-picker .md-form label.active {
color: red;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.7.0
- Device: imac
- Browser: chrome
- OS: macos
- Provided sample code: No
- Provided link: No