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

Question

On Macs and iOS devices, in Safari, a <select> 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?

Solution 1

@beanland; You have to write

-webkit-appearance:none;

in your css.

read this http://trentwalton.com/2010/07/14/css-webkit-appearance/

Solution 2

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:

select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Solution 3

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("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
}

Solution 4

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

1. Long text was covering the arrows in the other solutions
2. 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;
}

Solution 5

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

View more solutions

Comments

[Ian Hunter]

Had no idea this existed. Thanks

[sandeep]

no need for thanks because there are lot of things which i didn't know :)

[Marc]

Is there a way to keep the arrow on the right side? I want to override only the color. Thank you

[Dorian]

@sandeep: And to make it cross-browsers: -moz-appearance: none; -webkit-appearance: none; appearance: none;

[Apollo]

He is not asking about the outline, but the glossy background.

[Jonathan Cross]

@Marc - As far as I can see, the only option is to re-create the arrows with background-image or unicode. stackoverflow.com/questions/18038147/…

[mbokil]

"Is there a way to keep the arrow on the right side?" No. Once you disable the appearance it kills the arrow. You can then re-create the arrow using CSS.

[alicjasalamon]

@Marc If after 3 years you're still interested.. I added a solution I found to make the arrows show.

[Ingo Renner]

sweet, appreciate the arrows fix! here's a version with transparent background: select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS‌​1uYW1lPSJMYXllciAxIi‌​B4bWxucz0iaHR0cDovL3‌​d3dy53My5vcmcvMjAwMC‌​9zdmciIHZpZXdCb3g9Ij‌​AgMCA0Ljk1IDEwIj48ZG‌​Vmcz48c3R5bGU+LmNscy‌​0ye2ZpbGw6IzQ0NDt9PC‌​9zdHlsZT48L2RlZnM+PH‌​RpdGxlPmFycm93czwvdG‌​l0bGU+PHBvbHlnb24gY2‌​xhc3M9ImNscy0yIiBwb2‌​ludHM9IjEuNDEgNC42Ny‌​AyLjQ4IDMuMTggMy41NC‌​A0LjY3IDEuNDEgNC42Ny‌​IvPjxwb2x5Z29uIGNsYX‌​NzPSJjbHMtMiIgcG9pbn‌​RzPSIzLjU0IDUuMzMgMi‌​40OCA2LjgyIDEuNDEgNS‌​4zMyAzLjU0IDUuMzMiLz‌​48L3N2Zz4=) no-repeat 95% 50%; }

[mga]

made a transparent arrow (couldn't paste here due to length): pastebin.com/HQ0x4Rka

[Neo]

Cool, thx. How can i create a custom arrow? (I would like to have a single triangle)

[alicjasalamon]

@Zardo If you have an SVG file, you can use b64.io to convert it to base64

[Kevin Christopher Henry]

I agree with your basic approach, but it's not necessary to base64 encode it (see here for more details). For a similar approach using plain-text SVG see my answer here.

[adrianTNT]

I added the down arrow with this code and seems to work nice: background-image:url(/down_arrow.gif); background-repeat:no-repeat; background-position:calc(100% - 10px);

[iSWORD]

If you have wide select elements, this will look a bit off. To fix it, you can use CSS3's background position edge offsets to better align the background. So replace no-repeat 95% 50% with no-repeat right 2px center

[Phyllis Sutherland]

This makes a double arrow in internet explorer 11. ideas on how to fix?

[Phyllis Sutherland]

This makes a double arrow in internet explorer 11. ideas on how to fix? Especially bad when you select a long option, because new icon will cover/obscure the option.

[Phyllis Sutherland]

The solution for IE is to use select::-ms-expand { display: none; } to hide the native IE selectbox dropdown icon, then use an actual png image as the background for the new icon. Problem occurs because SVG images aren't always positioned properly via CSS in IE.

[Phyllis Sutherland]

The solution for IE is to use select::-ms-expand { display: none; } to hide the native IE selectbox dropdown icon, then use an actual png image as the background for the new icon. Problem occurs because SVG images aren't always positioned properly via CSS in IE.

[Andreas Gassmann]

The same arrows but in white and transparent pastebin.com/07iS41b5

[brandito]

People beat me to customising the SVG but I see nobody here has managed to minify it! Here it's minified and the arrow fill colour is now white :) pastebin.com/r7DDqHps

[Brett]

I notice the added arrows include both an up/down arrow - any quick fix just to show the usual down arrow?

[Nathan Basanese]

// , Would you mind explaining how and why that removes the gloss?

[Justin Edwards]

The solution basically has two components: 1. Request that the browser doesn't do any style/display on the element. 2. Provide a reasonable style. In browsers that aren't god awful (read, not safari) the browser provided element style is good. In safari however the browser provide style is disgusting and terrible. Consequently we must override the browser provided display in every browser. The lines ending in appearance:none do part 1 from above. The other lines tackle part 2. Does that help?

[Priyanjit]

Excellent. This should be the accepted answer as it's more complete. Thanks.

[Noel Abrahams]

The background-color property applies to the background of the select element. To change the colour of the down arrow, you need to change the SVG fill property in the URL, eg fill='%23fc0000'

[Iggy]

Better to use background-position without calc: background-position: right .8em top 60%; and some cursor: is needed

[evolross]

Is there a double-arrow version of this someone can demonstrate?

[Zagor84]

if you want to add a custom dropdown arrow 'glyph' style, feel free to use this background: url('data:image/jpeg;base64,/9j/2wCEABoZGSccJz4lJT5CLy8vQkc9‌​Ozs9R0dHR0dHR0dHR0dH‌​R0dHR0dHR0dHR0dHR0dH‌​R0dHR0dHR0dHR0dHR0dH‌​R0cBHCcnMyYzPSYmPUc9‌​Mj1HR0dEREdHR0dHR0dH‌​R0dHR0dHR0dHR0dHR0dH‌​R0dHR0dHR0dHR0dHR0dH‌​R0dHR0dHR//dAAQAAv/u‌​AA5BZG9iZQBkwAAAAAH/‌​wAARCAAKABIDACIAAREB‌​AhEB/8QAXQAAAgMAAAAA‌​AAAAAAAAAAAAAAEDBAUB‌​AQAAAAAAAAAAAAAAAAAA‌​AAAQAAECBQMFAAAAAAAA‌​AAAAAAEAAgMEEhNRETFB‌​ISJCcfARAQAAAAAAAAAA‌​AAAAAAAAAAD/2gAMAwAA‌​ARECEQA/AN6avU1QNKm9‌​aT5DGvBwfhDKxY0w644W‌​oWzWOHeTyTgYHO/u+UkD‌​QhCD/9k=') no-repeat 95% 50%;