Trình duyệt (Webkit, IE, Firefox) Thay đổi nền cho chọn

Question

Tôi đã cố gắng loại bỏ nền gradient mặc định trong Trang web. Tôi biết nếu tôi thiết lập -webkit-appereance: không có điều này sẽ có thể nhưng sau đó tôi sẽ mất các mũi tên và hành vi khác trong trình đơn thả xuống mà tôi muốn. Có anyway thiết lập nền trắng với sự xuất hiện -webkit: menulist?

Đây là những gì tôi có nhưng nền không thay đổi

.ius select{ 
    -webkit-appearance: menulist; 
    -moz-appearance: menulist; 
    appearance: menulist; 
    height:32px; 
    border:1px solid #c8c8c8; 
    width:250px; 
    background:rgba(255, 255, 255, 0); 
    background: transparent; 
} 

Answer 1

Thuộc tính xuất hiện thường được sử dụng cho hai điều:

1. Bắt chước các kiểu gốc của các yếu tố khác
2. HOẶC loại bỏ tất cả kiểu gốc (xuất hiện cài đặt thành không)

Đó là một tài sản khá kỳ lạ.

Vì bạn muốn xóa nền mặc định gốc, bạn cần đặt giao diện thành không. Điều này sẽ xóa tất cả các kiểu dáng (các gradient và các biểu tượng mũi tên mặc định). Tuy nhiên, đây không phải là vấn đề lớn vì bạn có thể sử dụng css để áp dụng nhiều kiểu dáng hơn cho nó.

Với sự đánh dấu:

<select id="menulist"> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
</select> 

Và CSS:

#menulist { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    height:20px; 
    border:1px solid rgb(156,156,156); 
    width:250px; 
    text-indent: 8px; 
    /** 
    * replace this background url with a proper arrow asset 
    **/ 
    background: url('http://placehold.it/5x10') no-repeat 95% 50%; 
} 

Các jsfiddle đầy đủ có sẵn ở đây: http://jsfiddle.net/gwwar/vR53Q/2/

Kể từ khách sạn này chỉ được hỗ trợ trên Chrome, Safari và Firefox, Tôi có thể sẽ đi một tuyến đường khác nhau và sử dụng kiểu dáng chọn gốc hoặc sử dụng một thành phần thả xuống mà bạn có toàn quyền kiểm soát.