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?

i used this - -webkit-appearance:none; and solved my issue – jyotishman saikia Feb 25 '21 at 08:18 — jyotishman saikia, Feb 25 '21 at 08:18

score 266 · Accepted Answer · edited Dec 05 '22 at 15:39

266

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/

edited Dec 05 '22 at 15:39

Michael

41,989
11
82
128

answered Oct 03 '11 at 17:54

sandeep

91,313
23
137
155

Had no idea this existed. Thanks – Ian Hunter Oct 03 '11 at 18:14
6

no need for thanks because there are lot of things which i didn't know :) – sandeep Oct 03 '11 at 18:26
147

Is there a way to keep the arrow on the right side? I want to override only the color. Thank you – Marc May 16 '13 at 16:04
19

@sandeep: And to make it cross-browsers: `-moz-appearance: none; -webkit-appearance: none; appearance: none;` – Dorian Oct 10 '13 at 15:46
1

@Marc - As far as I can see, the only option is to re-create the arrows with background-image or unicode. http://stackoverflow.com/questions/18038147/browser-webkit-ie-firefox-change-background-for-select – Jonathan Cross Jan 14 '16 at 15:05
"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. – mbokil Apr 29 '16 at 19:25
6

@Marc If after 3 years you're still interested.. I added a solution I found to make the arrows show. – alicjasalamon Aug 04 '16 at 10:20
2

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);` – adrianTNT May 13 '17 at 16:55
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 Nov 08 '17 at 15:44
3

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 Nov 08 '17 at 16:20

score 145 · Answer 2 · edited Dec 05 '22 at 15:41

145

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;

edited Dec 05 '22 at 15:41

Michael

41,989
11
82
128

answered Aug 04 '16 at 10:18

alicjasalamon

4,171
15
41
65

21

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%; } – Ingo Renner Aug 15 '16 at 22:07
1

made a transparent arrow (couldn't paste here due to length): http://pastebin.com/HQ0x4Rka – mga Aug 24 '16 at 19:36
Cool, thx. How can i create a custom arrow? (I would like to have a single triangle) – Neo Oct 19 '16 at 08:33
1

@Zardo If you have an SVG file, you can use http://b64.io/ to convert it to base64 – alicjasalamon Oct 19 '16 at 08:36
I agree with your basic approach, but it's not necessary to base64 encode it (see [here](https://css-tricks.com/probably-dont-base64-svg/) for more details). For a similar approach using plain-text SVG see my answer [here](http://stackoverflow.com/a/41641709/2395796). – Kevin Christopher Henry Jan 13 '17 at 19:07
7

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` – iSWORD Jun 30 '17 at 00:10
This makes a double arrow in internet explorer 11. ideas on how to fix? – Phyllis Sutherland Nov 08 '17 at 15:39
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 Nov 08 '17 at 16:20
4

The same arrows but in white and transparent https://pastebin.com/07iS41b5 – Andreas Gassmann Dec 12 '17 at 13:14
2

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 :) https://pastebin.com/r7DDqHps – brandito Mar 23 '18 at 01:53
3

I notice the added arrows include both an up/down arrow - any quick fix just to show the usual down arrow? – Brett Jul 09 '18 at 19:04
Excellent. This should be the accepted answer as it's more complete. Thanks. – Priyanjit Dec 04 '18 at 12:38
1

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%; – Zagor84 Jun 19 '20 at 13:39

score 28 · Answer 3 · edited Jun 20 '20 at 09:12

28

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 15 '19 at 13:19

Zephyr was a Friend of Mine

7,661
4
37
39

2

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'` – Zephyr was a Friend of Mine Jan 21 '20 at 19:58
1

Better to use background-position without calc: background-position: right .8em top 60%; and some cursor: is needed – Iggy Feb 12 '20 at 18:59
Is there a double-arrow version of this someone can demonstrate? – evolross Feb 18 '20 at 02:29

score 5 · Answer 4 · answered Nov 16 '18 at 17:27

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

// , Would you mind explaining how and why that removes the gloss? — Nathan Basanese, Nov 16 '18 at 18:43
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? — Justin Edwards, Nov 18 '18 at 00:24

score 4 · Answer 5 · answered Jun 08 '22 at 08:43

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

score 1 · Answer 6 · answered May 23 '16 at 16:36

1

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

answered May 23 '16 at 16:36

Joansy

159
12

score 1 · Answer 7 · answered Jul 31 '20 at 11:46

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.

score 1 · Answer 8 · answered Feb 25 '21 at 08:19

1

i have used this and solved my

-webkit-appearance:none;

answered Feb 25 '21 at 08:19

jyotishman saikia

2,079
1
15
11

score -8 · Answer 9 · answered Jul 09 '13 at 06:42

-8

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

answered Jul 09 '13 at 06:42

Surajnaikin

1

8

He is not asking about the outline, but the glossy background. – Apollo Jun 20 '14 at 14:34

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

9 Answers9

2019 Version

Linked