Removing Shadow Style from Dropdown Menu in Safari

Hi everyone,

Question. Is it possible to remove the shadow style from the dropdown menus in Safari? I have it set to Shadow Style: None, yet there is the shadow / gradient effect. I’m sure this is apple’s automatic way of displaying dropdown menus, but for style purposes I’m a little surprised they dictate this to developers.

Is there a way to turn off the shadow effect in Safari?

34%20AM

A year later… :slight_smile:

I wanted to mention a solution that may work for anyone who is looking for an answer to this question. You can try to apply CSS to the select class to bring some control of the dropdown styling across browsers. Place this snippet into Settings > SEO/metatags > advanced > ‘Script/meta tags in header’

<style>
    select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')
      !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right .7em top 50%, 0 0 !important;
    background-size: .65em auto, 100% !important;
    border: none;
    border-radius: 0px;
    padding: 0em 0em 0em .35em;
}
</style>

Some key things to note:

  • Styling in this snippet may not be what you want. You may have to modify the CSS to get the desired result.
  • Bubble dynamically re-applies its own CSS to the select class after a hide/show event and so make sure to include !important tags to keep your CSS from the header and override that. Otherwise the dropdown styling could break.
  • This is not a 100% tested solution. I would test the heck out of this to make sure the behavior works as you’d expect in all browsers.
  • This CSS strips away all of styling in a dropdown including the down arrow and so we need to build it back up. The background-image: line includes in-line coded SVG image to draw that arrow. This is URL encoded and the SVG may be customized.
5 Likes

Jon,

Thanks for sharing this.

I’m just starting to explore CSS in Bubble. It’s been more than a decade since I worked with CSS in much of any capacity and now I’m ready to start incorporating it into my Bubble app.

Because the CSS is placed in the header, it seems that it will apply to all dropdowns in the app. Is that correct?

I can envision situations where the styling you want is different depending on the context. Is that possible?

Worked like a charm, thank you!

2 Likes

also you can use this plugin for fully customizable dropdown element instead of the default one

1 Like