How change Button Radios Widget Background with CSS?

  • ellie123
    Asked on October 3, 2014 at 5:01 PM

    Hello -

    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.

    Thank you

    How change Button Radios Widget Background with CSS? Image 1 Screenshot 20

    Page URL: http://form.jotformpro.com/form/42684369949980
  • jonathan
    Replied on October 3, 2014 at 6:10 PM

    Hi,

    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.

    Thanks.

     

  • jonathan
    Replied on October 3, 2014 at 7:11 PM

    Hi,

    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.

    How change Button Radios Widget Background with CSS? Image 1 Screenshot 40

     

    How change Button Radios Widget Background with CSS? Image 2 Screenshot 51

     

    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.

    How change Button Radios Widget Background with CSS? Image 3 Screenshot 62

     

    Hope this help. Please inform us if there is more we can assist you with.

    Thanks.

  • ellie123
    Replied on October 3, 2014 at 7:35 PM

    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

  • Ashwin JotForm Support
    Replied on October 4, 2014 at 12:16 AM

    Hello ellie123,

    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.

    Thank you!