Làm cách nào để loại bỏ độ bóng trên phần tử đã chọn trong Safari trên máy Mac?

Question

Trên máy Mac và thiết bị iOS, trong Safari, phần tử <select> có màu nền tạo ra độ bóng trên chính nó. Điều này dường như không xảy ra trong các hệ điều hành khác.

Ví dụ, tôi có một yếu tố lựa chọn với các đặc tính phong cách:

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

Và yếu tố của tôi có màu nền Tôi muốn, nhưng bóng vẫn còn đó. Có ai biết làm thế nào để làm cho nó một màu phẳng?

Answer 1

@beanland; Bạn phải viết

-webkit-appearance:none; 

trong css của bạn.

đọc http://trentwalton.com/2010/07/14/css-webkit-appearance/

Answer 2

Nếu bạn kiểm tra User Agent StyleSheet của Chome, bạn sẽ tìm thấy điều này

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

trong ngắn hạn sở hữu phác thảo của mình - làm cho nó Không

rằng nên loại bỏ glow

Answer 3

Kiểm tra ngoại hình -webkit: không có gì và các dẫn xuất của nó. Được mô tả bởi Chris Coyer tại đây: https://css-tricks.com/almanac/properties/a/appearance/

Answer 4

Sử dụng -webkit-appearance:none; cũng sẽ xóa các mũi tên cho biết đây là menu thả xuống.

Xem đoạn này mà làm cho nó hoạt động trên các trình duyệt khác nhau một thêm mũi tên tùy chỉnh mà không bao gồm bất kỳ tập tin hình ảnh:

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>