Single Choice: How to change color of text options?

  • USODFW
    Asked on February 22, 2018 at 5:17 PM

    How can I change the options text color for single choice field?  For example, I want the field label black as normal default, but the options text in red. 

    How can I do that?


    thanks, Bob

  • Kevin Support Team Lead
    Replied on February 22, 2018 at 7:51 PM

    It's possible to change the text color on the options of a single choice element with some CSS code, here are the codes that will help you doing so: 

    - If you need to change the options color for all the single choice fields on your form: 

    [data-type="control_radio"]  .form-radio-item label{

        color: red;

    }

    - If you need to change the color only for one of the single choice fields specifically, then you will need to do the following: 

    1. Find the field id and copy the number shown there. This guide will help you finding that and below is an example about it: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names 

    Single Choice: How to change color of text options?  Image 10

    Replace the number right after the underscore on the code below with the number you copied from your field: 

    #id_3  .form-radio-item label{

        color: red;

    }

    This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • USODFW
    Replied on February 23, 2018 at 10:43 AM
    Kevin, this worked perfectly. thanks, bob
    ...
  • USODFW
    Replied on February 23, 2018 at 11:43 AM
    I was able to successfully use your first code to change all options in the
    field to Red. The second code works, but only for all options in one
    specific field. What I'd like to do is change the 1st option of each of
    these single choice fields to Red.
    I have several id's which are numbered in order from #input_27_0 and
    continue thru #input_41_0. I'm guessing the _0 is the 1st option of
    each field id. What is the code to change just the 1st option line.
    thanks, bob
    ...
  • Sabbir
    Replied on February 23, 2018 at 12:23 PM

    You can use the following CSS code snippet to change the color of the 1st radio option line:

    #label_input_27_0, #label_input_28_0, #label_input_29_0, #label_input_30_0, #label_input_31_0,
    #label_input_32_0, #label_input_33_0, #label_input_34_0, #label_input_35_0, #label_input_36_0,
    #label_input_37_0, #label_input_38_0, #label_input_39_0, #label_input_40_0, #label_input_41_0{

        color: red;

    }

    This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you have any further query, please let us know.

  • USODFW
    Replied on February 23, 2018 at 1:43 PM
    Awesome, works perfectly. Thank you so much, bob
    ...