Change checkbox color in form - CSS not working | Community
Skip to main content
Sonali_Jadeja3
Sonali_Jadeja3
Level 4
Jul 11, 2019 7:29 PM UTC
Solved

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

Any inputs will be appreciated!! Thank you!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Sonali_Jadeja3
Sonali_Jadeja3Accepted solution
Level 4
Jul 12, 2019 12:56 PM UTC

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 reply

5 replies

Sonali_Jadeja3
Sonali_Jadeja3AuthorAccepted solution
Level 4
Jul 12, 2019 12:56 PM UTC

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

Translate
SanfordWhiteman
SanfordWhiteman
Level 10
Jul 12, 2019 7:16 PM UTC

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

Translate
Sonali_Jadeja3
Sonali_Jadeja3Author
Level 4
Jul 23, 2019 4:52 PM UTC

Done!

Translate
SanfordWhiteman
SanfordWhiteman
Level 10
Jul 11, 2019 9:20 PM UTC

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

Translate
    Grace_Brebner3
    Grace_Brebner3
    Level 10
    Jul 11, 2019 9:05 PM UTC

    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?
    Translate
    Terms & ConditionsAccessibility statement

    Loading footer...