Jak mogę usunąć połysk wybranego elementu w Safari na Macu?

Question

Na Macach i urządzeniach z systemem iOS w przeglądarce Safari element <select> z kolorem tła generuje nad nim połysk. Nie wydaje się, aby miało to miejsce w innych systemach operacyjnych.

Na przykład, mam wybrać element z tych właściwości styl:

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

A mój element ma kolor tła chcę, ale połysk jest nadal. Czy ktoś wie, jak zrobić płaski kolor?

Answer 1

@beanland; Musisz napisać:

-webkit-appearance:none; 

w twoim css.

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

Answer 2

Jeśli skontrolować User Agenta StyleSheet z Chome, znajdziesz to

outline: -webkit-focus-ring-color auto 5px; 

w krótki zarys jego własność - sprawiają, że Żadne

że należy usunąć poświata

Answer 3

Wyewidencjonuj - wygląd -ml: brak i jego pochodne. Oryginalnie opisana przez Chrisa Coyera tutaj: https://css-tricks.com/almanac/properties/a/appearance/

Answer 4

Użycie -webkit-appearance:none; spowoduje również usunięcie strzałek wskazujących, że jest to lista rozwijana.

Zobacz ten fragment, który sprawia, że ​​pracują w różnych przeglądarkach dodaje niestandardowe strzały bez uwzględniania żadnych plików graficznych:

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

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