Topic: Checkmark color change inside checkbox.
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
Please use this styles:
.form-check-input[type='checkbox']:checked + .form-check-label:before {
border-right: 2px solid #494949;
border-bottom: 2px solid #494949;
}
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
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
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;
}
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: 8.4.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No