Multiple Choice: How do I change the checkbox tick color to orange?

How do I change the checkbox tick color to orange? I watched the video at this link and followed the steps, but it did not work: https://www.jotform.com/answers/13647721-how-to-change-the-checkbox-tick-colour

Please advise.

Thank you!

Hi there,

Thanks for reaching out to Jotform Support. Are you working on this form? You can easily change the tick checkboxes to orange by Injecting CSS into your form. Let me walk you through it:

1. First, copy this code:

.form-checkbox-item:not(#foo) label:before {

    background-color: orange;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's what it looks like afterward:

Give it a try and let us know how it goes.

Thank you. I do not want the box to appear as orange. I want the box to remain white and change to orange when clicked. How do I do that?

Hi Bridgett,

You can use the custom CSS code below to your form, and it should change the check marks to orange:

/*thread 35237311 - make checkmarks orange*/

.form-checkbox:checked+label:after, .form-checkbox:checked+span:before {

    background-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMSA0bDIuNjY3IDNMOSAxbCIgc3Ryb2tlPSIjRjI4QzI4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==")!important;

}

.form-checkbox:checked+label:before {

        background-color: #fff!important;

        border-color: #b8bdc9!important;

}

/*ends here*/

Just make sure to remove the code my colleague provided to remove the orange background. Check out the screencast below to see how it works on a cloned form now:

Give it a try and let us know if you need any more help.