SOLVED

Change checkbox color in form - CSS not working

Go to solution
Highlighted

Change checkbox color in form - CSS not working

HI,

I tried to use this CSS for changing color of the checkbox - It's blue right now & I need to be white.

.mktoForm input[type=checkbox] + label:before {

color: #FFFFFF !important;
}

But with this, it doesn't the color. Instead, it bring up this "1"  in the checkbox. And if I remove the CSS to change the color, the checkboxes stay the default blue!!!

pastedImage_1.png

Any inputs will be appreciated!! Thank you!

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

Re: Change checkbox color in form - CSS not working

Actually changed the CSS to - 

.mktoForm .mktoCheckboxList .mktoField:checked+label:before {
background-color: transparent;
}

.mktoForm .mktoCheckboxList .mktoField+label:before {
border-color: #fff;
}

And it worked!

Thank you Grace Brebner‌ & Sanford Whiteman‌ for checking in anyway! 

Best,

Sonali

View solution in original post

5 REPLIES 5
Highlighted
Level 7 - Champion

Re: Change checkbox color in form - CSS not working

Hey Sonali,

Community will be better able to help you with this if you can provide a live URL of the issue in action so we can inspect all of the CSS.

Can you also be clearer in the behaviour you want the page to display here - i.e....

  • Do you want the background of the checkbox to be white on check or uncheck?
  • Do you want the border colour to also be white? Do you want it white on check, or uncheck, or both?
  • If you want the background to be white on check, what colour do you want the tick to be instead of its current white?
Highlighted
Level 10 - Community Moderator

Re: Change checkbox color in form - CSS not working

And pls highlight all code using the Advanced Editor's syntax highlighter so it's readable.

Highlighted

Re: Change checkbox color in form - CSS not working

Actually changed the CSS to - 

.mktoForm .mktoCheckboxList .mktoField:checked+label:before {
background-color: transparent;
}

.mktoForm .mktoCheckboxList .mktoField+label:before {
border-color: #fff;
}

And it worked!

Thank you Grace Brebner‌ & Sanford Whiteman‌ for checking in anyway! 

Best,

Sonali

View solution in original post

Highlighted
Level 10 - Community Moderator

Re: Change checkbox color in form - CSS not working

Could you still highlight it though?  So future people can read it more easily.

Highlighted

Re: Change checkbox color in form - CSS not working

Done!