-
pardop1Asked on November 16, 2016 at 9:08 PM
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
-
CharlieReplied on November 17, 2016 at 1:13 AM
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.
-
pardop1Replied on November 17, 2016 at 1:44 AMI tried that and it did not appear to work. Did you test it?
Sent from my iPhone
... -
Elton Support Team LeadReplied on November 17, 2016 at 3:22 AM
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!
-
Elton Support Team LeadReplied on November 17, 2016 at 3:29 AM
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;