Change checkbox color in form - CSS not working | Community
Skip to main content
Sonali_Jadeja3
Sonali_Jadeja3
Level 4
July 11, 2019
Solved

Change checkbox color in form - CSS not working

  • July 11, 2019
  • 3 replies
  • 34592 views

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.
Best answer by Sonali_Jadeja3

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

3 replies

Grace_Brebner3
Grace_Brebner3
Level 10
July 11, 2019

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?
SanfordWhiteman
SanfordWhiteman
Level 10
July 11, 2019

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

    Sonali_Jadeja3
    Sonali_Jadeja3AuthorAccepted solution
    Level 4
    July 12, 2019

    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
    SanfordWhiteman
    Level 10
    July 12, 2019

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

    Sonali_Jadeja3
    Sonali_Jadeja3Author
    Level 4
    July 23, 2019

    Done!

    Terms & ConditionsAccessibility statement

    Loading footer...