Targeting checkbox css


Topic: Targeting checkbox css

Nate asked 4 years ago

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.


Arkadiusz Idzikowski staff answered 4 years ago

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 }

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 Angular
  • MDB Version: 10.0.1
  • Device: Desktop
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No
Tags