Support for styling form select, radio, and checkboxes (and other default browser styles)

Community resources Product feedback
1

Question regarding select choices on a form. I need to be able to style the choices with the same flexibility as the Dropdown. For example, the dropdown options have a good height for mobile and would be easy to touch. Plus you can select each one and customize as you see fit.

For Select the choices are not large like the dropdown and I see no way of customizing.

Am I missing something?

3 Likes
2

I’m trying to do a similar thing as well. I haven’t heard much from anyone as of yet! Hope that you figure it out as well.

3

Hey guys, this is something we’ve discussed in the past, but haven’t been able to implement yet. One thing you can do though, is use custom code to override the default styles.

Also, if you want to see a fun example for style forms, take a peek at our playground: Webflow Playground - Webflow

4

Hi,

I’m trying to remove the gradients from the form drop downs, just want nice flat single colour select box’s with no borders, how do i do this in webflow?

Thanks,
Aidan

5

Hey @aidan removing browser-default styles from drop downs can only be done with javascript because each browser sets their own styles. You can however do some style alterations using !important to override browser defaults. Find info here.

We have plans for drop-down style editing using the style panel (using some javascript magic), but it’s a ways off.

1 Like
6

Hi Aidan, I have the same trouble - did you find a fix?

7

Hi,

I found that if you look for .w-select {} within the webflow.css file and add in this to it, it works - loses the arrows but thankfully gets rid of that nasty gradient:

border: 0 !important;  /*Removes border*/
-webkit-appearance: none !important;  /*Removes default chrome and safari style*/
2 Likes
8

Where can I add this code?

9

When you export you get a css folder and within that is a webflow.css file. Looking at both Chrome and Safari now however they have both been updated since and no longer have gradient dropdowns - more simple iOS style ones…

10

I have not been able to find any webflow generated forms that show a selection drop down arrow in select boxes. (On iOS browsers):

And I don’t see any “-webkit-appearance: none” in the code overriding the default styling of the browser.

What is the deal?