Skip to main content

What are the known limitations of the dropdown element?

Why styling, text alignment, and animations don't work on Bubble's native dropdown element, and how to work around each limitation.

Written by Sofia Maconi

Bubble's native dropdown element uses the browser's built-in HTML select component. Because the browser โ€” not Bubble โ€” controls how it looks and behaves, many styling and interaction features either don't work or vary across browsers.

Styling (fonts, colors, and borders) doesn't apply

Styling properties like font, color, and border have no visible effect on the dropdown. The browser and OS control its appearance, and each browser renders it differently.

What you might notice:

  • Styling properties like font, color, or border have no visible effect on the dropdown

  • The dropdown looks different across Chrome, Firefox, and Safari

  • Custom styles applied in the editor don't appear in preview or live mode

Workaround: Build a custom dropdown using a Group Focus element. This gives you full control over styling, layout, and interaction behavior โ€” you can design the trigger and the options list independently using standard Bubble elements.

Text alignment has no effect in most browsers

The text-align setting on a dropdown has no visible effect in Chrome or Safari. Firefox does support text alignment on native dropdowns, but most browsers don't.

What you might notice:

  • The text-align setting has no effect in Chrome or Safari

  • Text alignment only works in Firefox, which supports it for native dropdowns

  • Other styling properties on the dropdown are similarly limited across browsers

Workaround: Use a Group Focus element to build a custom dropdown. This supports full text alignment control across all browsers.

Animations don't work

Applying an Animate workflow action directly to a dropdown has no visible effect. The action shows as executed in the debugger, but the dropdown doesn't visually animate โ€” a limitation of how the animation library interacts with the native HTML component.

What you might notice:

  • An animate action on a dropdown shows as executed in the debugger but the dropdown doesn't visually animate

  • Other elements animate correctly using the same workflow action

Workaround: Place the dropdown inside a Group element and apply the animate action to the group instead. The group animates correctly and takes the dropdown with it.

Did this answer your question?