Change colors in a multiple choice or checkbox object

  • 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

     
    Jotform Thread 1941981 Screenshot
  • BJoanna
    Replied 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

  • TPLG
    Replied on August 27, 2019 at 1: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.


  • BJoanna
    Replied on August 27, 2019 at 2: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 Screenshot 10

    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.