# \[Breaking Change\] Dropdown browser compatibility

**URL:** <https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363>\
**Category:** New features\
**Created:** [May 19, 2022, 2:55pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363 "2022-05-19T14:55:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kathleen](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kathleen/32/120278_2.png) [@kathleen](https://forum.bubble.io/u/kathleen)\
**Post date:** [May 19, 2022, 2:55pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/1 "2022-05-19T14:55:05Z")

</div>

Hi everyone,

We’re about to introduce a breaking change that makes dropdowns cross-browser compatible. Since we use the browser’s native dropdown HTML component, dropdowns have very limited styling options and vary between browsers. However, we are now adding padding to dropdowns and replacing the browser’s styles with our own dropdown arrow as a background image (this also means that any background image you add to the element will override our default style). As a result, dropdowns will look consistent across browsers and they will respect the appearance settings you set in the Property Editor. This is hopefully an exciting change for most of you, but we are releasing as a new bubble version out of an abundance of caution.

Please let us know if you have any questions!

---

<div class="post-metadata">

**Author:** ![petter](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/petter/32/98626_2.png) [@petter](https://forum.bubble.io/u/petter)\
**Post date:** [May 19, 2022, 3:07pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/2 "2022-05-19T15:07:09Z")

</div>

I think I speak for everyone when I say this is a very welcome update 😁

Thanks team Bubble!

---

<div class="post-metadata">

**Author:** ![renatoasse](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/renatoasse/32/93895_2.png) [@renatoasse](https://forum.bubble.io/u/renatoasse)\
**Post date:** [May 19, 2022, 3:09pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/3 "2022-05-19T15:09:14Z")

</div>

Nice! No more adding dropdowns inside groups to simulate padding 🙂

Thanks @kathleen !

---

<div class="post-metadata">

**Author:** ![jameore](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jameore/32/211509_2.png) [@jameore](https://forum.bubble.io/u/jameore)\
**Post date:** [May 19, 2022, 3:48pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/4 "2022-05-19T15:48:58Z")

</div>

😙

 ![Screenshot 2022-05-19 at 16.47.43](https://us1.discourse-cdn.com/bubble/original/3X/6/5/652c61bbda36b1eac7f754d08e4efde7a807d1a4.png)

---

<div class="post-metadata">

**Author:** ![johnny](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/johnny/32/203020_2.png) [@johnny](https://forum.bubble.io/u/johnny)\
**Post date:** [May 19, 2022, 5:00pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/5 "2022-05-19T17:00:41Z")

</div>

YAYYYYY! Finally!

---

<div class="post-metadata">

**Author:** ![J805](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/j805/32/41267_2.png) [@J805](https://forum.bubble.io/u/J805)\
**Post date:** [May 19, 2022, 5:05pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/6 "2022-05-19T17:05:08Z")

</div>

Already pushed the update, looks so much better! Thanks again, was waiting for this one. 🙌

---

<div class="post-metadata">

**Author:** ![matt15](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/matt15/32/112555_2.png) [@matt15](https://forum.bubble.io/u/matt15)\
**Post date:** [May 19, 2022, 8:52pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/7 "2022-05-19T20:52:25Z")

</div>

![](https://media.giphy.com/media/5GoVLqeAOo6PK/giphy.gif)

---

<div class="post-metadata">

**Author:** ![mszaxaroff](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mszaxaroff](https://forum.bubble.io/u/mszaxaroff)\
**Post date:** [May 19, 2022, 9:45pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/8 "2022-05-19T21:45:47Z")

</div>

Cool! Thanks, this solves a lot of problems! Maybe in the next update you will add #hashtags and @tags? There are no well working solutions. I want to create a twitter feed with hashtags added, I have to use search and replace and sometimes it still doesn’t work.

---

<div class="post-metadata">

**Author:** ![rlslimited](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@rlslimited](https://forum.bubble.io/u/rlslimited)\
**Post date:** [May 20, 2022, 2:27am UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/9 "2022-05-20T02:27:33Z")

</div>

@kathleen good to hear these neglected little things are finally being looked into and getting much needed updates.

Does this update include the ability to style the container that holds the dropdown values? Sizing, background color etc… I understand this could be achieved using other methods but if you are working on updating the UI controls of these elements it would make sense to give us control of all aspects of the element, while you are on a roll!

![image](https://us1.discourse-cdn.com/bubble/original/3X/9/7/972b50ffc8e9fb7da60334afcd4aad07c743ccea.png)

---

<div class="post-metadata">

**Author:** ![Sarah\_Esteve](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sarah_esteve/32/258989_2.png) [@Sarah\_Esteve](https://forum.bubble.io/u/Sarah_Esteve)\
**Post date:** [May 20, 2022, 2:51am UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/10 "2022-05-20T02:51:09Z")

</div>

no more simulated padding with border and outset for border 🤣🤣 @jameore

---

<div class="post-metadata">

**Author:** ![Sarah\_Esteve](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sarah_esteve/32/258989_2.png) [@Sarah\_Esteve](https://forum.bubble.io/u/Sarah_Esteve)\
**Post date:** [May 20, 2022, 2:51am UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/11 "2022-05-20T02:51:48Z")

</div>

+1 for this. Default is uggly

---

<div class="post-metadata">

**Author:** ![jameore](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jameore/32/211509_2.png) [@jameore](https://forum.bubble.io/u/jameore)\
**Post date:** [May 20, 2022, 6:23am UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/12 "2022-05-20T06:23:33Z")

</div>

@Sarah_Esteve they are making it too easy for us 😄

---

<div class="post-metadata">

**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\
**Post date:** [May 20, 2022, 7:21am UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/13 "2022-05-20T07:21:04Z")

</div>

Loving this first step. Could you make the placeholder color dynamic?

 ![CleanShot 2022-05-20 at 07.35.32@2x](https://us1.discourse-cdn.com/bubble/original/3X/f/e/fe3b8bfc5b8bd504e972ff821abe2c1243ffc417.png)

---

<div class="post-metadata">

**Author:** ![mike\_verbruggen](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mike_verbruggen/32/171992_2.png) [@mike\_verbruggen](https://forum.bubble.io/u/mike_verbruggen)\
**Post date:** [May 20, 2022, 1:41pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/14 "2022-05-20T13:41:14Z")

</div>

@kathleen thanks for this update. I tried to upload my own arrow(image) in the background of the dropdown but was unable to position the background the way I liked it because there are two default CSS settings in my way.

![image](https://us1.discourse-cdn.com/bubble/original/3X/2/8/28f3883ded8286088e3aff3dd2ac800f184cb137.png)

Can you give us the ability to edit the background-position and background-size otherwise we are unable to position the background image in a proper way?

---

<div class="post-metadata">

**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\
**Post date:** [May 23, 2022, 2:38am UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/15 "2022-05-23T02:38:34Z")

</div>

> [@Sarah\_Esteve](#):
>
> no more simulated padding with border and outset for border

Unfortunately, that’s the only way I am able to get spacing between the chevron and right edge which looks balanced to my eye (at least without using CSS or a replacement background image with spacing built in). What am I missing? 😕

Would be cool if the distance between the background image and right edge was “linked” to the right padding.

---

<div class="post-metadata">

**Author:** ![kathleen](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kathleen/32/120278_2.png) [@kathleen](https://forum.bubble.io/u/kathleen)\
**Post date:** [May 23, 2022, 2:54pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/16 "2022-05-23T14:54:42Z")

</div>

Thanks for all the great feedback everyone! We truly appreciate it, and have taken note of these requests for future consideration.

---

<div class="post-metadata">

**Author:** ![kathleen](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kathleen/32/120278_2.png) [@kathleen](https://forum.bubble.io/u/kathleen)\
**Post date:** [May 23, 2022, 3:01pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/17 "2022-05-23T15:01:46Z")

</div>

As per my above comment, we’ve logged this as a feature request 🙂 You are correct that the right padding does not shift the background image — currently, this is intentional behavior but something we are looking into for the future.

---

<div class="post-metadata">

**Author:** ![nikifrancesca](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nikifrancesca/32/61036_2.png) [@nikifrancesca](https://forum.bubble.io/u/nikifrancesca)\
**Post date:** [May 24, 2022, 5:59pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/18 "2022-05-24T17:59:20Z")

</div>

Excellent! 👏🏼👏🏼

---

<div class="post-metadata">

**Author:** ![tararbese23](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@tararbese23](https://forum.bubble.io/u/tararbese23)\
**Post date:** [May 24, 2022, 6:17pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/19 "2022-05-24T18:17:59Z")

</div>

Great !!! 🥳 🤠

---

<div class="post-metadata">

**Author:** ![greg18](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/greg18/32/94594_2.png) [@greg18](https://forum.bubble.io/u/greg18)\
**Post date:** [May 26, 2022, 11:15pm UTC](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363/20 "2022-05-26T23:15:50Z")

</div>

Thanks @kathleen this is a good improvement. But if I understand correctly, all that is improved is the appearance of the un-opened dropdown – once the dropdown is clicked, it still opens the browser’s native dropdown.

Some browsers unfortunately do not support a native dropdown, such as the Tesla in-vehicle web browser. No Bubble dropdowns work in those browsers.

Perhaps Tesla should upgrade its browser to support native dropdowns (I suppose Tesla is not known for their web browser). But in the meantime, could Bubble please build a dropdown element that does not rely on the native browser?

[Next page](https://forum.bubble.io/t/breaking-change-dropdown-browser-compatibility/207363.md?page=2)
