Tôi muốn đề xuất giải pháp của tôi mà bạn có thể tìm thấy trong repo GitHub này .
Điều này cũng hoạt động cho IE8 và IE9 với một mũi tên tùy chỉnh xuất phát từ phông chữ biểu tượng.
Ví dụ về hành động thả xuống của trình duyệt chéo tùy chỉnh : kiểm tra chúng với tất cả các trình duyệt của bạn để xem tính năng trình duyệt chéo.
Dù sao, hãy bắt đầu với các trình duyệt hiện đại và sau đó chúng ta sẽ thấy giải pháp cho những trình duyệt cũ hơn.
Mũi tên thả xuống cho Chrome, Firefox, Opera, Internet Explorer 10+
Đối với các trình duyệt này, thật dễ dàng để đặt cùng một hình nền cho trình đơn thả xuống để có cùng một mũi tên.
Để làm như vậy, bạn phải đặt lại kiểu mặc định của trình duyệt cho selectthẻ và đặt quy tắc nền mới (như được đề xuất trước đó).
select {
/* you should keep these firsts rules in place to maintain cross-browser behaviour */
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-image: url('<custom_arrow_image_url_here>');
background-position: 98% center;
background-repeat: no-repeat;
outline: none;
...
}
Các appearancequy tắc được đặt thành không để đặt lại các trình duyệt mặc định, nếu bạn muốn có cùng một khía cạnh cho mỗi mũi tên, bạn nên giữ chúng đúng vị trí.
Các backgroundquy tắc trong các ví dụ được đặt với hình ảnh nội tuyến SVG đại diện cho các mũi tên khác nhau. Chúng được định vị 98% từ trái sang để giữ một số lề cho đường viền bên phải (bạn có thể dễ dàng sửa đổi vị trí theo ý muốn).
Để duy trì hành vi trình duyệt chéo chính xác, quy tắc duy nhất khác phải được đặt đúng chỗ là outline. Quy tắc này đặt lại đường viền mặc định xuất hiện (trong một số trình duyệt) khi phần tử được nhấp. Tất cả các quy tắc khác có thể dễ dàng sửa đổi nếu cần.
Mũi tên thả xuống cho Internet Explorer 8 (IE8) và Internet Explorer 9 (IE9) bằng Phông chữ Biểu tượng
Đây là phần khó hơn ... Hoặc có thể không.
Không có quy tắc chuẩn để ẩn các mũi tên mặc định cho các trình duyệt này (như select::-ms-expandcho IE10 +). Giải pháp là ẩn phần thả xuống có chứa mũi tên mặc định và chèn phông chữ biểu tượng mũi tên (hoặc SVG, nếu bạn thích) tương tự như SVG được sử dụng trong các trình duyệt khác (xem selectquy tắc CSS để biết thêm chi tiết về SVG nội tuyến được sử dụng).
Bước đầu tiên là thiết lập một lớp có thể nhận ra trình duyệt: đây là lý do tại sao tôi đã sử dụng IF IF IE có điều kiện ở đầu mã. Các IF này được sử dụng để đính kèm các lớp cụ thể vào htmlthẻ để nhận ra trình duyệt IE cũ hơn.
Sau đó, mọi selectHTML trong phải được bao bọc bởi một div(hoặc bất kỳ thẻ nào có thể bao bọc một phần tử). Tại trình bao bọc này, chỉ cần thêm lớp có chứa phông chữ biểu tượng.
<div class="selectTagWrapper prefix-icon-arrow-down-fill">
...
</div>
Nói một cách dễ dàng, trình bao bọc này được sử dụng để mô phỏng selectthẻ.
Để hoạt động như một trình đơn thả xuống, trình bao bọc phải có đường viền, vì chúng ta ẩn đường dẫn xuất phát từ select.
Lưu ý rằng chúng ta không thể sử dụng selectđường viền vì chúng ta phải ẩn mũi tên mặc định kéo dài hơn 25% so với đường bao. Do đó, đường viền bên phải của nó sẽ không hiển thị vì chúng tôi ẩn thêm 25% này theo overflow: hiddenquy tắc được áp dụng cho selectchính nó.
Phông chữ biểu tượng mũi tên tùy chỉnh được đặt trong lớp giả :beforetrong đó quy tắc contentchứa tham chiếu cho mũi tên (trong trường hợp này là dấu ngoặc đơn bên phải).
Chúng tôi cũng đặt mũi tên này ở một vị trí tuyệt đối để căn giữa nó càng nhiều càng tốt (nếu bạn sử dụng các phông chữ biểu tượng khác nhau, hãy nhớ điều chỉnh chúng một cách hợp lý bằng cách thay đổi giá trị trên cùng và bên trái và kích thước phông chữ).
.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
content: ")";
position: absolute;
top: 43%;
left: 93%;
font-size: 6px;
...
}
Bạn có thể dễ dàng tạo và thay thế mũi tên nền hoặc mũi tên phông chữ biểu tượng, với mỗi thứ bạn muốn chỉ cần thay đổi nó trong background-imagequy tắc hoặc tự tạo một tệp phông chữ biểu tượng mới.