Change colors in a multiple choice or checkbox object

  • Profile Image
    TPLG
    Asked on August 27, 2019 at 11:43 AM

    do we have an option where we can change colors in a multiple choice or checkbox object?. So each option should be using a different color.


    Thank you

     
    Screenshot
  • Profile Image
    BJoanna
    Answered on August 27, 2019 at 12:57 PM

    I made several tests and unfortunately I was not able to change the colors of the options inside of the Checkbox in Dropdown widget. 

    If you want to change the colors, I can only suggest you to use a basic Multiple Choice field.

    Here is a demo form - https://form.jotform.com/92384662345968

    I added the following CSS code to my demo form:

    #label_input_3_0 {

        color : red;

    }

    #label_input_3_1 {

        color : green;

    }

    #label_input_3_2 {

        color : blue;

    }

    How to Inject Custom CSS Codes

  • Profile Image
    TPLG
    Answered on August 27, 2019 at 01:29 PM

    Thank you for your answer but is not working. I applied in the "Current Subject Area", css options. Colors are not changing. Can you take a look and let me know what I am doing wrong, please.


  • Profile Image
    BJoanna
    Answered on August 27, 2019 at 02:02 PM

    I originally suggested you to use a basic Multiple Choice field inside of the Checkbox in Dropdown widget, as I was not able to change the colors inside of the widget. 

    I asked one of my colleagues to check if this is possible and he was able to change the colors inside of the widget you are using.

    Please add the following CSS code to your widget:

    .scroller-content span:nth-child(1) {

        color: red;

    }

    .scroller-content span:nth-child(2) {

        color: blue;

    }

    .scroller-content span:nth-child(3) {

        color: green;

    }

    .scroller-content span:nth-child(4) {

        color: orange;

    }

    1566928843widgetcss.PNG

    Here is my demo form - https://form.jotform.com/92385851804969

    You can add additional CSS codes for the other options. For each new option change the :nth-child() value.