In a native <select>, text does not overlay underneath the dropdown arrow: https://jsfiddle.net/v6r7d8c2/

The <settings-dropdown-menu> hides the native frame and uses a background image positioned at 97% 70% for the arrow: https://jsfiddle.net/szuetokm/

If we remove the <settings-dropdown-menu> |width| styling (so it fits the content), the result is similar: https://jsfiddle.net/k3Lyyfgh/


I played around with this a bit for the timezone dropdown menu, which can be quite long. Using a -webkit-padding-end value of twice the background-image width, combined with setting background-position-x to "right" (because 97% doesn't scale properly with different font sizes/zoom levels).

BTW, it would be easier to vertically center the dropdown arrow if you chop off the bottom 12px of the svg's viewbox. Otherwise the vertical position of the arrow won't scale easily with font sizes/zoom levels.