A year later…
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’
background-repeat: no-repeat, repeat !important;
background-position: right .7em top 50%, 0 0 !important;
background-size: .65em auto, 100% !important;
padding: 0em 0em 0em .35em;
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.