Single Choice: How to change color of text options?

  • Profile Image
    USODFW
    Asked on February 22, 2018 at 05: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

  • Profile Image
    Kevin_G
    Answered on February 22, 2018 at 07: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 

    15193470271.png

    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. 

  • Profile Image
    USODFW
    Answered on February 23, 2018 at 10:43 AM
    Kevin, this worked perfectly. thanks, bob
    ...
  • Profile Image
    USODFW
    Answered 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
    ...
  • Profile Image
    Sabbir
    Answered 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.

  • Profile Image
    USODFW
    Answered on February 23, 2018 at 01:43 PM
    Awesome, works perfectly. Thank you so much, bob
    ...