Change checkbox color in form - CSS not working

[Sonali_Jadeja3]

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!!!

Any inputs will be appreciated!! Thank you!

[Sonali_Jadeja3 · Accepted solution]

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

[SanfordWhiteman]

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

[Sonali_Jadeja3]

Done!

[SanfordWhiteman]

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

[Grace_Brebner3]

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?