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

css macos safari drop-down-menu background-color
Ian Hunter picture Ian Hunter · Oct 3, 2011 · Viewed 126.5k times · Source

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?

Answer

sandeep picture sandeep · Oct 3, 2011

@beanland; You have to write 

-webkit-appearance:none;

in your css.

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

Related questions

How to detect if the OS is in dark mode in browsers?

Similar to "How to detect if OS X is in dark mode?" only for browsers. Has anyone found if there is a way to detect if the user's system is in the new OS X Dark Mode in Safari/Chrome/…

Read More
Force DOM redraw/refresh on Chrome/Mac

Every once in a while, Chrome will render perfectly valid HTML/CSS incorrectly or not at all. Digging in through the DOM inspector is often enough to get it to realize the error of its ways and redraw correctly, so …

Read More
CSS - Overflow: Scroll; - Always show vertical scroll bar?

So currently I have: #div { position: relative; height: 510px; overflow-y: scroll; } However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div …

Read More