Checkmark color change inside checkbox.


Topic: Checkmark color change inside checkbox.

Vilaggio asked 5 years ago

Expected behavior Change standard blue check mark to black

*Actual behavior*only the fill color of the box gets changed.

Resources (screenshots, code snippets etc.) Stack overflow and a number or random sites before I came here. I've used at least 50 variations of this CSS

input[type="checkbox"]:checked ~ .checkmark { color: #494949; }

Picture wont upload!!! JPG or PNG


Arkadiusz Idzikowski staff answered 5 years ago

Please use this styles:

.form-check-input[type='checkbox']:checked + .form-check-label:before {
    border-right: 2px solid #494949;
    border-bottom: 2px solid #494949;
}

Vilaggio answered 5 years ago

Great but why do I get a check with out a box when I want to check inside the box on click. Why can't a post a picture to you?


Bartosz Termena staff commented 5 years ago

Hi! Please try to send us the image again, everything should work now.

Best Regards, Bartosz.


Vilaggio commented 5 years ago

Pictures still dont work


Vilaggio answered 5 years ago

I want to display the checkbox with the check mark inside the box, not the check mark when the box dissapears. How do I display the default and not the material checkbox?

Pictures still dont work


Arkadiusz Idzikowski staff answered 5 years ago

If you want checkbox that have border even in checked state, you can use [filledIn]="true" input:

<mdb-checkbox [filledIn]="true">Filled-in example</mdb-checkbox>

Then use these css rules to change check mark color:

.form-check-input[type='checkbox'].filled-in:checked + .form-check-label:before {
    border-right: 2px solid #494949;
    border-bottom: 2px solid #494949;
}

You can also change the colors of border and background:

.form-check-input[type='checkbox'].filled-in:checked + .form-check-label:after {
    border-color: #494949;
    background-color: white;
}

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: 8.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No