How to change the check box fields color?

having trouble changing the color of the check box fields and the check marks in the fields - all whit on white. maybe the border around the box can be a med gray and the check marks should be the same color as the labels. the form is https://form.jotform.com/63189277072968.

 

Thanks for a quick fix.

 

Pam

Hi,

I presume you have applied a theme on the form? 

You can change the style and color of the check box using the Form Designer Tool.

Here's a quick guide: 

1. In the Form Designer Tool, select the check box field, you will see at the right side panel the check box style options. Select a template.

2. Here you can select a style of the check box, select the one you like.

3. From there, you should be able to edit the color, size, padding, etc... 

 

Save the changes and view the form again.

I hope that helps.

I tried that and it did not appear to work. Did you test it?
Sent from my iPhone
...

I checked your form and there's a theme installed in it, that's probably the reason why changes in the form designer are not taking effect.

Anyway, to change the checkboxes and radio buttons to grey, inject this CSS codes to your form.

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

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

    border: 1px solid rgb(154, 154, 154) !important;

}

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

    background-color: rgb(64, 64, 64) !important;

    box-shadow: 0 2px 0 0 rgb(64, 64, 64), 2px 2px 0 0 rgb(64, 64, 64), 4px 2px 0 0 rgb(64, 64, 64), 6px 2px 0 0 rgb(64, 64, 64) !important;

}

.form-radio-item:not(#foo) label:after {

    background-color: rgb(64, 64, 64) !important;

}

 

Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Expected result:

Hope this helps!

By the way, I made a small change on the code. You can take it again here https://www.jotform.com/answers/991865

I used 2px border instead of 1px but feel free to use whichever you prefer.

 border: 1px solid rgb(154, 154, 154) !important;