What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
How do I make one of the radio options another color?Asked by thefonz22 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!
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.
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.
color : #FF0000; /* Red */
color : #008000; /* Green */
color : #0000ff; /* Blue */
Hope this information helps. Please let us know if you need further assistance. We will be happy to help.
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.
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
10am Session <span style="color: red;">SOLD OUT</span>
2pm Session <span style="color: green;">Available</span>
You might be also interested in a Ticket Purchases widget field. It comes with the stock limit options.
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?
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>