Streaming live at 10am (PST)

Customizing the select dropdown in webflow


#1

i cant manage to fix the padding and even the font color on webflow select dropdown 42%20PM


#2

Hi @Jose_Gonzalez

Please provide a read-only link so we can take a look at the settings…:slightly_smiling_face:


#3

http://selectform.webflow.io/


#4

Hi Jose,

That’s a published link which is also useful…however click the link above to see how to share a read-only link to your Designer settings…or see the screenshot below:


#5

ohh my bad https://preview.webflow.com/preview/selectform?preview=50dbdda9bef164bf22a437f621b3b574


#6

its wierd that it take so much effort just for that

ohh my bad https://preview.webflow.com/preview/selectform?preview=50dbdda9bef164bf22a437f621b3b574


#7

Hi Jose,

I’ve managed to change font colour and type, just by using the typography settings. It’s also possible to change the size of the box for each item.

Padding though…that may be limited due to it being a pre-made Webflow component. Maybe @brando or @Nita could confirm if there is a limitation/fix ?

29


#8

Yeah the padding is the issue is there any other way to create a select-field cause this left padding is killing me


#9

Hi @StuM @Jose_Gonzalez

I can definitely understand wanting to customize form select fields. At this time, it’s a known issue among browsers – they each have their own take on form styles. You can read more on this here: https://css-tricks.com/dropdown-default-styling/

For now, the best way to edit this is with custom code. Here’s a Codepen example of something you can build off of: https://codepen.io/chriscoyier/pen/pvfyt


#10

Hi there,

I have a work around …

Create a ‘div block’ (the green block in the image below), and place the ‘Form select’ element inside of the div block (the blue block in the image below)

Set your desired width on the div block

Set the width to 100% on the form select element

Add padding to the div block (both left and right)

Style both the div block and ‘Form select’ element to create your desired look!

The image below shows an example of this.

Form

Hope thats helps!