How do I make one of the radio options another color?

  • thefonz22
    Asked on October 10, 2014 at 12:03 PM

    I have a few radio options on my jotform. I want some of the text in one of the options to be green. Seems simple enough, but can't find how to do this. Pls help!

  • Kiran Support Team Lead
    Replied on October 10, 2014 at 12:50 PM

    It is possible to change the color to the text of radio options by injecting custom CSS. Here is the demo form with changed color for each option.

    http://form.jotformpro.com/form/42825194657969?

    Here is what needs to be done for changing colors to the text of radio options.

    1. Click on the settings icon of the radio options that you want to change the color and then Show Properties

    How do I make one of the radio options another color? Image 1 Screenshot 30

    2. Note down the IDs displays with the respective values that you want to change the color and close the properties window.

    How do I make one of the radio options another color? Image 2 Screenshot 41

    3. Following is the CSS code injected for changing colors. Similarly, you can change the ids and colors in your JotForm.

    label[for=input_1_0]

    {

    color : #FF0000; /* Red */

    }

    label[for=input_1_1]

    {

    color : #008000; /* Green */

    }

    label[for=input_1_2]

    {

    color : #0000ff; /* Blue */

    }

    Hope this information helps. Please let us know if you need further assistance. We will be happy to help.

  • thefonz22
    Replied on October 10, 2014 at 1:51 PM

    This is a great help and I thank you for taking the time to help me BUT I just want PART of the word to be a different color. For example I have the following radio box options..

     

    - 10am Session SOLD OUT

    - 2pm Session Available

     

    I want the "SOLD OUT" to be red, and the "Available" to be green with everything else being black.

    Any help would be appreciated.

  • Mike_T Jotform Support
    Replied on October 10, 2014 at 3:08 PM

    In this case, we can wrap the text options into span html tags and use inline styles to set the colors.

    10am Session SOLD OUT
    2pm Session Available

    Changed to:

    10am Session <span style="color: red;">SOLD OUT</span>
    2pm Session <span style="color: green;">Available</span>

    How do I make one of the radio options another color? Image 1 Screenshot 20

    Thank you.

  • Mike_T Jotform Support
    Replied on October 10, 2014 at 3:13 PM

    You might be also interested in a Ticket Purchases widget field. It comes with the stock limit options.

    How do I make one of the radio options another color? Image 1 Screenshot 20

  • thefonz22
    Replied on October 10, 2014 at 3:14 PM

    How do I make one of the radio options another color? Image 1 Screenshot 20

     

    Worked a treat! HOWEVER it automatically rearranges it so the text in color goes to the left... Any ideas as to why I cant have the black text first?

    So close!!!!

  • Mike_T Jotform Support
    Replied on October 10, 2014 at 4:09 PM

    The issue is somehow specific to your form. As a workaround we can additional span tags to fix this. 

    <span>10am Session <span style="color: red;">SOLD OUT</span></span>
    <span>2pm Session <span style="color: green;">Available</span></span>

    How do I make one of the radio options another color? Image 1 Screenshot 20