Checkmark color change inside checkbox.

Topic: Checkmark color change inside checkbox.

Vilaggio free 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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Please use this styles:

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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 1 Best answer

Please insert min. 20 characters.

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;
}

Add comment

Vilaggio free answered 5 years ago

0 0 Best answer

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

Add comment

Vilaggio free answered 5 years ago

0 0 Best answer

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 free commented 5 years ago

Pictures still dont work

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

Vilaggio

60Support score
4Questions 4Answers 0Snippets