-
thefonz22Asked 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 LeadReplied 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
2. Note down the IDs displays with the respective values that you want to change the color and close the properties window.
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.
-
thefonz22Replied 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 SupportReplied 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 AvailableChanged to:
10am Session <span style="color: red;">SOLD OUT</span>
2pm Session <span style="color: green;">Available</span>Thank you.
-
Mike_T Jotform SupportReplied 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.
-
thefonz22Replied on October 10, 2014 at 3:14 PM
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 SupportReplied 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>