137

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?

Ian Hunter
  • 8,921
  • 12
  • 60
  • 73

8 Answers8

251

@beanland; You have to write 

-webkit-appearance:none;

in your css.

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

sandeep
  • 88,914
  • 23
  • 135
  • 154
  • 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
  • 144
    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
129

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>
alicjasalamon
  • 3,883
  • 14
  • 38
  • 64
  • 20
    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
24

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;
}
Community
  • 1
  • 1
Noel Abrahams
  • 7,423
  • 3
  • 34
  • 36
  • 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'` – Noel Abrahams 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
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 with white arrow

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;
}
Justin Edwards
  • 143
  • 9
  • // , Would you mind explaining how and why that removes the gloss? – Nathan Basanese Nov 16 '18 at 18:43
  • 1
    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
2

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

Joansy
  • 161
  • 12
0

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.

CharlesT
  • 83
  • 6
0

i have used this and solved my

-webkit-appearance:none;

jyotishman saikia
  • 1,856
  • 1
  • 13
  • 9
-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

Surajnaikin
  • 1