Change Background Color of Multiple Choice checkbox element

I would like to change the background color to #eee of the multiple choice checkbox element.

I believe the css is different for this.

I have tried this and could not get it to work:

}.form-matrix-column-headers{

  background: #eee;

}

.form-matrix-row-headers{

 background: #eee;

}

.form-matrix-values{

background: #eee;

}

Thank you,

Spencer

Do you mean to say that you want to display a background color for each checkbox / multiple choice options?

Please inject the following custom css code in your form and it will apply background color on each options of all checkbox question:

.form-checkbox-item label{

    background: #eee !important;

}

The following guide should help you how to upload image in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Do try it out and get back to us if you have any questions.

Hello, I would like to have a solid background to help make the element stand out.  Please see attached image.

If you want to set the text field to a grey background. You can inject this custom CSS code on your form: 

#text_318 {

 background: #eee;

}

I would like to change the background color to #eee of the multiple choice checkbox element as noted above.

The text box was shown as an example of how I want the multiple choice element to appear.

Please inject this custom CSS code to your form to change your checkbox fields background color.

li[data-type=control_checkbox]{

  background: #eee !important;

}

Perfect!

Thank you.

Can you help me change the background color to #eee for #input_309 so it looks the same as the multiple choice checkbox discussed above?  I tried:

div#cid_309 {
   background: #eee;
   width : max-content;
  padding : 30px;

but it doesn't look correct.

Hi, 

Please remove the custom CSS code that you have added:

div#cid_309 {

background: #eee;

width : max-content;

padding : 30px;

}

And add this custom CSS code to change the background color of #input_309:

li#id_309 {

background-color: #eee !important;

}

If you need further assistance, please contact us again. Thank you.

Thank you, that mostly worked, but a bit of formatting still needed.

Do you think it is possible to fill the white gap below the field "Relevant Merchandise Options? There is also a white gap just to right of the field "Enter email address to receive an urn catalogue"

Thank you,

Spencer

To remove the white space on the screenshot you have provided, please add this custom CSS code to your form:

li#id_309 {

background-color: #eee !important;

width: 448.15px;

padding: 0px !important;

height: 75px !important;

}

Here's the result:

Thank you,

That seem to work well for viewing the form on my desktop.  The mobile version doesn't look quite right.

Any advice to make the css work for both mobile and desktop viewing?

Spencer

Hello Spencer, the fields on Page 5 (Personalize the Service with these choices) behave this way because of the custom CSS that has been added.

Will you be open for an alternative? If you are, consider the following:

1. Remove the last CSS code you entered on your form:

li#id_309 {

    background-color : #eee !important;

    width : 448.15px;

    padding : 0px !important;

    height : 76px !important;

}

2. Click the EMAIL field (Enter email address to receive an urn catalogue) on Page 5, then remove its SUBLABEL:

Why do you need to remove it? The sublabel container appends an additional height to the field, thus explaining why you needed to ask how to remove the extra white space > which lead to a custom CSS code request > which then caused for the need to separately do it for mobile and desktop.

Without a sublabel to begin with, we can simply the process. An alternative to the SUBLABEL is to use a PLACEHOLDER instead.

3. After doing everything so far, add these CSS codes to your form to give the email field a lightgray background and make it extend to the width of the form (both for mobile and desktop).

li#id_309 {

    background: #eee;

    padding-bottom: 14px;

    padding-right: 114px;

}

Hi Jim,

Thank you for the advice. The changes fixed the mobile version. The desktop version has a few gaps remaining.

Do you have any suggestions to fix the gaps on the desktop version?

Thank you,

Spencer

Can you please remove the latest added CSS code on your form

li#id_309 {

    background: #eee;

    padding-bottom: 14px;

    padding-right: 114px;

}

and add this custom CSS code to your form and see if this will fix the issue?

li#id_475 {

    background-color : #eee !important;

    width : 448.15px;

    padding : 0px !important;

    height : 76px !important;

}

@media screen and (max-width: 900px) {

   li#id_475 {

     width:100%;

     }

}

Chriistian, thank you for the suggestion.

This is the result of the css noted above.

Spencer

Above is the desktop version.

The mobile version looks good.

Your message has reached my colleague @Chriistian. He will get back to you on this soon.

I checked your form: https://form.jotform.com/72765272602154 and it seems to be displayed properly. 

Can you check again your form and see if the fields will be displayed properly now?

 I think we are looking at different inputs.  I am currently dealing with input 309.  I have several pages that look the same. However, the result is the same on my laptop computer.

To be sure, I am using this css code:

li#id_475 {

    background-color : #eee !important;

    width : 448.15px;

    padding : 0px !important;

    height : 76px !important;

}

@media screen and (max-width: 900px) {

   li#id_309 {

     width:100%;

     }

}

Can you please try to change the CSS code from li#id_475 { to li#id_309 { and see if this will fix the issue on your end?

li#id_309 {

    background-color : #eee !important;

    width : 448.15px;

    padding : 0px !important;

    height : 76px !important;

}

@media screen and (max-width: 900px) {

   li#id_309 {

     width:100%;

     }

}

Yes, thank you. That worked!

Have a nice day.

Struggling with this again.  I had it looking nice and something has changed.

If possible, can my css code be examined to see where I may be making an error?

I'm having alignment problems especially on a mobile phone.

Thank you,

Spencer

li#id_309,#id_310,#id_339,#id_340,#id_384,#id_385,#id_429,#id_430,#id_475,#id_474 {

    background-color : #eee !important;

    width : 448.15px;

    padding : 0px !important;

    height : 76px !important;

}

@media screen and (max-width:900px) {

   li#id_309,#id_340,#id_385,#id_430,#id_475 {

     width:100%;

     }

We would like to apologize for any inconvenience. I have checked the CSS codes my colleagues have suggested you add to your form and I can see that it is still the same. However, I have noticed that the position of the field with field ID, #input_309, was changed compared to what is shown in the screenshots above.

Also, I have checked the Revision History of your form and I see that there are a lot of changes made on the form since we last resolved your issue.

In order for us to help you further, can you tell exactly the issue you are having right now, please?

We will wait for your response.