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

  • Profile Image
    Steven 
    Asked on March 02, 2021 at 09:38 AM

    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

    Screenshot
  • Profile Image
    Nik_M
    Answered on March 02, 2021 at 11:18 AM

    Like this?

    1614701824_603e65007593c_checkbox.PNG

    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

  • Profile Image
    mrfunnybiz
    Answered on March 02, 2021 at 11:52 AM

    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?

    Also on an additional note, I've noticed that when filling out the form sometimes the option is given for someone to automatically enter basic info such as name, phone, email, address, etc. I notice when that happens, the info entered automatically turns the background of the entry area blue whereas when someone types in the info directly it's the regular background. I'd like the background of the entry to remain the same whether it was entered automatically or directly.

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

    Thanks again for your kind attention.

    SS

  • Profile Image
    Nik_M
    Answered on March 02, 2021 at 01:27 PM

    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;

    }

    1614709552_603e833009f21_1.PNG

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

  • Profile Image
    mrfunnybiz
    Answered on March 02, 2021 at 04:29 PM

    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

    1614720529_603eae11f300a_Screen Shot 202


  • Profile Image
    Lorenz_A
    Answered on March 02, 2021 at 10:13 PM

    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.


  • Profile Image
    mrfunnybiz
    Answered on March 03, 2021 at 02:40 PM

    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

    1614800356_603fe5e4e646b_Screen Shot 202

  • Profile Image
    Nik_M
    Answered on March 03, 2021 at 04:10 PM

    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;

    }

    1614805762_603ffb026bd86_checkbox.gif

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

  • Profile Image
    mrfunnybiz
    Answered on March 04, 2021 at 01:24 AM

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

    SS