How can I remove the gloss on a select element in Safari on Mac

Question

On Macs and iOS devices  in Safari  a  lt select gt  element with a background color generates a gloss over itself   This does not seem to happen in other operating systems   For example  I have a select element with these style properties   select   -moz-border-radius  3px  -webkit-border-radius  3px  border-radius  3px  padding  3px 6px  margin  10px 0 7px  width  250px  background-color   BD2786  color  white  letter-spacing  - 04em  font-weight  bold  border  0      And my element has the background color I want  but the gloss is still there   Does anyone know how to make it a flat color

User · Answer

i have used this and solved my  -webkit-appearance none

User · Answer

2019 Version Shorter inline image URL  shows only down arrow  customisable arrow colour    From https   codepen io jonmircha pen PEvqPa Author is probably Jonathan MirCha select     -webkit-appearance  none    -moz-appearance  none    appearance  none    background  url  quot data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  width  100  height  100  fill   238C98F2  gt  lt polygon points  0 0 100 0 50 50   gt  lt  svg gt  quot   no-repeat    background-size  12px    background-position  calc 100  - 20px  center    background-repeat  no-repeat    background-color   efefef

User · Answer

If you inspect the User Agent StyleSheet of Chome  you ll find this  outline  -webkit-focus-ring-color auto 5px    in short its outline property - make it None  that should remove the glow

User · Answer

beanland  You have to write   -webkit-appearance none    in your css   read this http   trentwalton com 2010 07 14 css-webkit-appearance

User · Answer

Check out -webkit-appearance  none and its derivatives  Originally described by Chris Coyer here  https   css-tricks com almanac properties a appearance

User · Answer

Sorry to pile on to an old item  I found partial answers to my questions here but had to do some work so I wanted to share my results for the next person   I ended up using the same approach as the other contributors  but with a few tweaks to fix the following   Long text was covering the arrows in the other solutions The image being used was a somewhat old and ugly up down combo arrow    The below will give you a working solution with the above issues fixed  Note  I used a white arrow for my use case  you may need to change the color of the arrow for yours   here s a preview     select        -webkit-appearance  none    -moz-appearance  none    appearance  none    background  url data image svg xml base64 PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8 PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4   no-repeat 101  50     padding-right 20px

User · Answer

Using -webkit-appearance none  will remove also the arrows indicating that this is a dropdown   See this snippet that makes it work across different browsers an adds custom arrows without including any image files    x000D   x000D  select  x000D   background  url data image svg xml base64 PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM PHRpdGxlPmFycm93czwvdGl0bGU PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8 PC9zdmc   no-repeat 95  50   x000D   -moz-appearance  none   x000D   -webkit-appearance  none   x000D   appearance  none  x000D         and then whatever styles you want   x000D   height  30px   x000D   width  100px  x000D   padding  5px  x000D    x000D   lt select gt  x000D     lt option value  volvo  gt Volvo lt  option gt  x000D     lt option value  saab  gt Saab lt  option gt  x000D     lt option value  mercedes  gt Mercedes lt  option gt  x000D     lt option value  audi  gt Audi lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

As mentioned several times here -webkit-appearance none   also removes the arrows  which is not what you want in most cases  An easy workaround I found is to simply use select2 instead of select  You can re-style a select2 element as well  and most importantly  select2 looks the same on Windows  Android  iOS and Mac

[css] How can I remove the gloss on a select element in Safari on Mac?

Examples related to css

Examples related to macos

Examples related to safari

Examples related to drop-down-menu

Examples related to background-color