Topic: Targeting checkbox css
Hi, all I'm trying to do is change the background color of the disabled default checkbox with CSS.
I have my checkbox here:
<mdb-checkbox [default]=true [(ngModel)]="box.enable">
{{box.label}}
</mdb-checkbox>
I can see the background-color is located here:
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: rgba(0, 123, 255, 0.5);
}
If I try to override that in my CSS the same way (even with !important) it does nothing.
You need to use css rule with higher specificity and add it to the global styles.scss file. For example:
mdb-checkbox .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: red }
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 Angular
- MDB Version: 10.0.1
- Device: Desktop
- Browser: Chrome
- OS: OSX
- Provided sample code: No
- Provided link: No