How can I change the background color of a multiple choice box (just the box)?

Hi,

I've been trying to do something that should be relatively simple but unfortunately is not and I've searched for info on you forums on CSS options and I'm not finding out what I need.

I have a form and on that form I have fillins and dropdowns where I was able to change the background color to make them stand out slightly to draw folks attention on where to answer.

I also have a few multiple choice boxes for them to select and I wanted the box colors to be the same as the fillin and dropdown colors but I am unable to figure out how to do that.

I figured out how to change the color of the whole multiple choice section or each line with the box but not the box itself and that's what I want, I just want to change to background color of inside the box itself before checking it.

Can you please advise me on how to do that?

Thank you in advance,

SS

Like this?

If so, please add the following CSS code:

.form-checkbox+label:before, .form-checkbox+span:before, .form-radio+label:before, .form-radio+span:before {

  background-color: #fffbca;

}

Related Guide: How to Inject Custom CSS Codes

Yup, that's it.. excellent, this worked perfectly.. thank you so much!!

Only thing I did notice that looks a bit funny now is after one selects a box, the check mark itself is white and the box fills in grey. I think it would look better for the check mark to be black with the background staying the same #fffbca color.

Can you provide a code to adjust that?

If you can provide a code for that as well, that'd be most helpful.

Thanks again for your kind attention.

SS

Please add the following CSS code to change the background color of the checked box and the color of the check mark:

.form-checkbox:checked+label:after {

  background-image: url('https://lh3.googleusercontent.com/proxy/no4WYexq75lgjnEGWwY5SNhR8ipY730h1blVFtaBos6wFKnOiJiSo5p7EKazzKlio-ZxSUAUjAwHanzMO35XbYWlnkR9r1w');

 background-color : #fffbca;

}

I created a new thread for your other issue: https://www.jotform.com/answers/2937011

Excellent, thank you Nik, terrific.

So since yer just nailing this right on the head, can I be so bold as to request one more small adjustment?

I noticed 2 things:

1) The check is pretty small and may be hard for some folks to see it well depending on their screen and I've seen there are some check options that are larger (including one I saw where the stem actually goes slightly out of the box as if one were checking it with a pen). If we can make the check just a bit larger that would be preferred, AND I also see that the check is not showing up at all on the mobile version for some reason, just the desktop version.

2) I also noticed that when the box is checked there are now some changes to the border around the box. The box border disappears after you select it and then click somewhere else or if you don't, there is a halo around the border that lingers.. if you uncheck it there is a blue border that shows and a halo. I prefer to keep the border consistent with the unchecked box so the only difference between a checked box and an unchecked one is the check itself..

So if we can fix those 2 things we're golden. Thank you!

SS

Greetings,

The check is pretty small and may be hard for some folks to see it well depending on their screen and I've seen there are some check options that are larger (including one I saw where the stem actually goes slightly out of the box as if one were checking it with a pen). If we can make the check just a bit larger then would be preferred.

Kindly inject please use the code below and inject it to your form.

.form-checkbox:checked+label:after, .form-radio:checked+label:after {

transform: scale(1.5);

}

.

I also noticed that when the box is checked there are now some changes to the border around the box. The box border disappears after you select it and then click somewhere else or if you don't, there is a halo around the border that lingers.. if you uncheck it there is a blue border that shows and a halo. I prefer to keep the border consistent with the unchecked box so the only difference between a checked box and an unchecked one is the check itself..

You may add the code below into your form.

.form-checkbox:checked+label:after {

border: 1px solid rgba(195, 202, 216, 0.75);

}

Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

Please give it a try and let us know how it goes.

Ugh, unfortunately, it's completely screwed up now. I had to start all over with a new checkbox.

I just need to know how to make the background color inside of the actual checkbox itself as seen in the attached screenshot below (both before and after there is a check selected) this color: #fffbca. Thanks!

SS

Please add the following CSS code:

.form-checkbox+label:before, .form-checkbox+span:before, .form-radio+label:before, .form-radio+span:before {

 background-color: #fffbca!important;

}

Cloned form: https://form.jotform.com/210615937358966

Thank you Nik, you rocked it once again.. solved the issue, looks great!

SS