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.
