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?

Assuntaassur

i used this - -webkit-appearance:none; and solved my issue – Tip

Answer 1

You can use this CSS property:

-webkit-appearance: none;

Note that this also causes the arrow icons to disappear. See the other answers for ways to add them back.

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

Musculature

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

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

@Mealymouthed - As far as I can see, the only option is to re-create the arrows with background-image or unicode. #18038647 – Sutton

"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. – Nedanedda

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

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); – Incite

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. – Loyalty

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. – Loyalty

Answer 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>

If you want to additionally set the background colour of the component then add a comma and the colour at the end of the background value, e.g. ... no-repeat 95% 50%, red;

Artimas

sweet, appreciate the arrows fix! here's a version with transparent background: select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat 95% 50%; } – Nagle

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

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

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

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. – Ibrahim

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 – Incomparable

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

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. – Loyalty

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

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 – Apoplexy

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

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

if you want to add a custom dropdown arrow 'glyph' style, feel free to use this background: url('data:image/jpeg;base64,/9j/2wCEABoZGSccJz4lJT5CLy8vQkc9Ozs9R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHCcnMyYzPSYmPUc9Mj1HR0dEREdHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//dAAQAAv/uAA5BZG9iZQBkwAAAAAH/wAARCAAKABIDACIAAREBAhEB/8QAXQAAAgMAAAAAAAAAAAAAAAAAAAEDBAUBAQAAAAAAAAAAAAAAAAAAAAAQAAECBQMFAAAAAAAAAAAAAAEAAgMEEhNRETFBISJCcfARAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwAAARECEQA/AN6avU1QNKm9aT5DGvBwfhDKxY0w644WoWzWOHeTyTgYHO/u+UkDQhCD/9k=') no-repeat 95% 50%; – Majors

Answer 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;
}

Met

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' – Met

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

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

Answer 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;
}

Commensurable

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

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? – Commensurable

Answer 5

2022 Update

Here's a clean solution which removes the Safari gloss style by setting appearance:none and keeps the drop-down arrow, without requiring a link to an external background image.

Wrap the drop-down in a div and give it border properties in the shape of a triangle. Note that this is on the after selector of the div.

HTML:

<div class="select-dropdown">
    <select>
      <option value="Null">Favorite Fruit</option>"
      <option value="Brooklyn">Apples</option>
      <option value="Manhattan">Plums</option>
      <option value="Queens">Oranges</option>
    </select>
  </div>

CSS:

  .select-dropdown:after {
      content: " ";
      position: absolute;
      top: 50%;
      margin-top: -2px;
      right: 8px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid white;
   }

Credit to Flash Buddy on Codepen

Shrieve

Answer 6

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

Matthei

Answer 7

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.

Boneblack

Answer 8

i have used this and solved my

-webkit-appearance:none;

Tip

Answer 9

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

Saar

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