Change Background Color of Multiple Choice checkbox element

  • Profile Image
    Perlman
    Asked on October 09, 2017 at 12:35 AM

    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

  • Profile Image
    ashwin_d
    Answered on October 09, 2017 at 02:42 AM

    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.

  • Profile Image
    Perlman
    Answered on October 09, 2017 at 10:04 AM

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


  • Profile Image
    Chriistian
    Answered on October 09, 2017 at 11:33 AM

    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;

    }

  • Profile Image
    Perlman
    Answered on October 09, 2017 at 11:38 AM

    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.

  • Profile Image
    Chriistian
    Answered on October 09, 2017 at 12:20 PM

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

    li[data-type=control_checkbox]{

      background: #eee !important;

    }

  • Profile Image
    Perlman
    Answered on October 09, 2017 at 12:32 PM

    Perfect!


    Thank you.

  • Profile Image
    Perlman
    Answered on October 09, 2017 at 03:54 PM

    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.

  • Profile Image
    John_Benson
    Answered on October 09, 2017 at 06:38 PM

    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.

  • Profile Image
    Perlman
    Answered on October 09, 2017 at 06:52 PM

    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

  • Profile Image
    John_Benson
    Answered on October 09, 2017 at 08:54 PM

    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:


  • Profile Image
    Perlman
    Answered on October 09, 2017 at 11:26 PM

    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

  • Profile Image
    Jim_R
    Answered on October 10, 2017 at 03:42 AM

    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;

    }

  • Profile Image
    Perlman
    Answered on October 10, 2017 at 10:27 AM

    Hi Jim,

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

    1507645596Screen Shot 2017-10-10 at 7.26

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

    Thank you,

    Spencer

  • Profile Image
    Chriistian
    Answered on October 10, 2017 at 11:09 AM

    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%;

         }

    }

  • Profile Image
    Perlman
    Answered on October 10, 2017 at 11:18 AM

    Chriistian, thank you for the suggestion.

    This is the result of the css noted above.

    Spencer

    1507648705Screen Shot 2017-10-10 at 8.17Above is the desktop version.

    The mobile version looks good.

  • Profile Image
    ashwin_d
    Answered on October 10, 2017 at 11:35 AM

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

  • Profile Image
    Chriistian
    Answered on October 10, 2017 at 11:57 AM

    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?

  • Profile Image
    Chriistian
    Answered on October 10, 2017 at 12:54 PM

    Can you please try to change the CSS code from li#id_475 { to li#id_309and 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%;

         }

    }

  • Profile Image
    Perlman
    Answered on October 10, 2017 at 01:30 PM

    Yes, thank you. That worked!

    Have a nice day.

  • Profile Image
    Mike_G
    Answered on October 15, 2017 at 03:47 AM

    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.

    1508053452t03_41_52.png

    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.