Add "Padding" in Dropdowns


I’ve noticed the Dropdown is the only input with no “padding” (vertical or horizontal) option in style.
I’m using a 20px horizontal padding in all inputs, so a dropdown with no padding among the other ones messes up the design:


I know there is one other topic mentioning this idea with a few very helpful html and CSS workarounds, but I think bubble staff could help us by adding as a default option.

Best regards.


You can put the dropdown down in a group and then make the dropdown’s background transparent.

Also, use the group’s border, not the dropdown’s border.


Great idea, but I think that would mess up the responsive settings

You could add some custom css to the dropdown.

Some solution for this?

Nope. Just setting the dropdown with no borders, and drawing a group outside it with the borders you want to simulate a padding.

I see

Multiple threads for this over a period of 5 years, any chance we can have horizontal padding for dropdowns yet? :slight_smile:

1 Like

I don’t think this technique won’t work when viewing your App in Safari. Even if you specify a dropdown as being a flat color in Bubble, Safari adds unwanted gradation and internal shadow to dropdowns. See attached image.
Screen Shot 2022-02-03 at 9.27.09 AM

How do you add custom css to the dropdown?

Moreover, allow design features for dropdowns and searchbox

Consider it done : )