Styling certain elements of forms have been difficult from the beginning of web design. Some modern frameworks offer either nicer default styles or the possibility to easily style any form component.
Styling a form is important because it is still, in 2017, the only component that is heavily handled, visually, by the browser defaults, hence forms looking regularly different on Windows and Macs, with also differences between browsers.
Regularly, forum users ask how to handle this: https://forum.webflow.com/t/best-way-to-design-this-complex-product-creation-form/38125
The image provided in the forum topic above (and attached here) is a good example of what we all would like to be able to produce.
An incomplete list of what would be great to control:
Additionally, complicated forms need tables "zones", zones titles and labels...
If you give support to this request, can you add examples of a component you'd like to have control on in the comments?
Vincent Bidaux
9/24/19 update: Now you can go fully custom with the design of your form checkboxes and radio buttons (with the option to switch back to the default styling at any point).
.svg){kind=logo}
To style all form elements, including dropdowns and radio buttons, use CSS and consider the following approaches:
Use attribute selectors: Target elements based on their attributes, like
[type="radio"]or[type="checkbox"].Utilize pseudo-elements: Style dropdown arrows with
::beforeand::afterpseudo-elements.Leverage CSS properties: Apply
appearance: noneto reset default styles, then customize withbackground,border, andpadding.Use JavaScript libraries: Consider libraries like Select2 or jQuery UI to enhance styling and functionality.
Browser-specific prefixes: Apply prefixes like
-webkit-or-moz-for cross-browser compatibility.Remember to test across different browsers and devices to ensure consistency.
I can not request to this, ADP Vantage
The form element inserts a component designed to contain controls that users can interact with to send information back to the server. This element is commonly used to gather information from the visitors of a website, like preferences, comments, opinions and a lot more.
We just needed to make some changes to checkbox for one of our projects. This will be an excellent addition!
+100 for this
At the moment I am using 3rd party CSS libraries but if Webflow could allow us to design these components it would be a game changer.
This is a constant desire of mine. It would be good to have a complete overhaul of forms to enable us to have multiple steps and complete control over all field styling.
Please update Webflow to support this! I think it is a really crucial feature. I should not have to rely on hacks to build an app that has custom dropdowns!
This is such a crucial feature for the web today. I can't believe it still doesn't even seem to be on the development team's radar.
I would love to be able to create styled "radio" buttons similar to the attachment below.
Yes, totally backing this. I believe this is very crucial. Many would switch to other frameworks because of the absence of such features
Totally backing this feature. Inability to style form elements fully is quite a bummer. Even drag-n-drop site and landing page builders like Wix and Instapage allow this.
I cannot request this feature enough. Forms are such a huge part of web and application design. The attached screenshot is from our current project, and as you can see, the capability to style these elements would be a great addition to Webflow. Gave this one a vote!