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 change Button Radios Widget Background with CSS?Asked by ellie123 on October 03, 2014 at 05:01 PM
Can you pls tell me what CSS I can use to change to change the background of the button once it's selected when using the Button Radio Widget?
Below is a screenshot to show you what I mean, right now just the word and arrow change, but I'd like the background to change to a different color once selected also.
radio buttons css widget css image radio widget
I see you were referring to the Button Radios Widget .
Although this widget doesn't have its own provisions for custom CSS code, I think there is still a way to customize it using the form CSS code injected instead.
I will do some test and try if I can come up with a solution.
I will get back to you quickly.
Unfortunately, I was not able to come up with a workaround for the Button Radio widget changing background color.
It was because the Radio widget doesn't have a property that can be used for alternating background color base on the status of the button. Example, the active and inactive option of the Radio button widget is non-existent... it was only the Text that have such properly.
If I may suggest, you can achieve what you wanted to by using instead the Image Radio Buttons Widget.
Here is a demo form http://www.jotform.me/form/42757269415463
The Image Radio Button Widget uses alternating images for the active/inactive option.
The Image Radio Button Widget have its own custom CSS option. So it can be further stylized using custom injected CSS codes.
Hope this help. Please inform us if there is more we can assist you with.
No that's not the field I was referring to....I was asking about the first type of button field. Pls refer to my screenshot.
I will take the other button field type away....pls check the form again.
Thanks so much
I did check your form again and it seems you want to change the appearance of "Button Radios" widget. Unfortunately, it is currently not possible to achieve your requirement as there is not property in this widget where you can inject custom css code.
As suggested by my colleague above, you should check "Image Radio Button" widget which allows you to inject custom css code in the widget.