Streaming live at 10am (PST)

Styling Radio Buttons


#1

Is there a native way (or quick & easy workaround) to do radio button styling in Webflow, or does it have to be hand coded?

The "radio" needs to be hidden - instead a styled button toggles the selected/not-selected state. Of course it needs to be within the construct of the site (not an external service like Typeform), and mobile friendly. Basically, it's a simple form with styling:

QUESTION 1 [Choice A] [Choice B] [Choice C]
QUESTION 2 [Choice A] [Choice B] [Choice C]

Example: http://getbootstrap.com/javascript/#buttons-checkbox-radio

I am 95% there with hiding the radio, styling the "Radio Button Field", but can't seem to maintain selected-state styling. Also the "this is a required field" tool tip doesn't place correctly when the radio is hidden.

Thanks.


Here is my public share link: LINK
(how to access public share link)


#2

Hey @Robster I did a quick search and found this possible solution here: http://forum.webflow.com/t/how-do-i-create-a-custom-input-field-for-checkboxes/20221
We don't have this capability natively within Webflow at this time but you can definitely chime in on this discussion here of adding it to the Wish List:


#3

Thank you @Waldo, that's helpful and I am able to finish this within Webflow instead of having to re-code the Webflow page with external javascript/jQuery. I should have known @Sabanna had the answer and posted a screen cast. I love her contributions.

User interaction on webpages is crucial, so yes, this should be much easier to do within a design program like Webflow. It's important to create forms that look like 2016 instead of 2006, and function on mobile devices where radio buttons don't work very well.

Thanks again.


#4

Reporting back on this, in case anyone else wants to create buttons as radio selectors.

The video that Sabanna graciously made won't completely work for multiple buttons because the version of Webflow has changed since her video (and does not allow duplication of the radio label, although you can work around this), and also because the interactions apply style to the entire button set. That's not the desired result. Seems the only quick solution was to use Bootstrap Studio and drop in the code http://getbootstrap.com/javascript/#buttons-checkbox-radio

Mobile views of webpages continues to grow, so hopefully we'll see Webflow features that allow rapid development of mobile-friendly design.


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.