How change Button Radios Widget Background with CSS?

  • Profile Image
    ellie123
    Asked on October 03, 2014 at 05: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

  • Profile Image
    jonathan
    Answered on October 03, 2014 at 06: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.

     

  • Profile Image
    jonathan
    Answered on October 03, 2014 at 07: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.

     

     

    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.

    Thanks.

  • Profile Image
    ellie123
    Answered on October 03, 2014 at 07: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

  • Profile Image
    ashwin_d
    Answered on October 04, 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!