FontAwesome trong <select> [trùng lặp]

Question

Tôi đang cố gắng thay đổi mũi tên mặc định cho menu thả xuống được chọn (phía bên phải trong ảnh bên dưới). Mã hiện tại của tôi như sau:

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

<select id="wgtmsr" style="width: 230px !important; min-width: 230px; max-width: 230px; font-size: 18px; height: 59px;" name="wgtmsr";><i class="fas fa-arrow-circle-down">

<option class="_self" selected="selected" value="#">MAKES SERVICED</option>
    
</select>

Kết quả nào sau đây: không có biểu tượng nào xuất hiện

Answer 1

<select id="wgtmsr" style="width: 230px !important; min-width: 230px; max-width: 230px; font-size: 18px; height: 59px;" name="wgtmsr";><i class="fas fa-arrow-circle-down">

<option class="_self" selected="selected" value="#">MAKES SERVICED</option>
    
</select>

<style>
#wgtmsr {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='arrow-circle-down' class='svg-inline--fa fa-arrow-circle-down fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-143.6-28.9L288 302.6V120c0-13.3-10.7-24-24-24h-16c-13.3 0-24 10.7-24 24v182.6l-72.4-75.5c-9.3-9.7-24.8-9.9-34.3-.4l-10.9 11c-9.4 9.4-9.4 24.6 0 33.9L239 404.3c9.4 9.4 24.6 9.4 33.9 0l132.7-132.7c9.4-9.4 9.4-24.6 0-33.9l-10.9-11c-9.5-9.5-25-9.3-34.3.4z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 1em;
}
</style>

Yếu tố <select>không chỉ cho phép tag<option> bên trong, xin xem ở đây Tôi có thể sử dụng HTML tags trong các tùy chọn cho các yếu tố chọn?

Theo tôi hiểu - bạn muốn thêm biểu tượng vào <select>, bạn có thể thực hiện việc này bằng cách sử dụng nền CSS , bạn có thể sử dụng svg trong base64 hoặc để tạo kiểu nền giống như bất kỳ phần tử nào khác (ví dụ: sử dụng hình ảnh jpg / png).
Cũng cần đặt lại các kiểu trình duyệt chọn mặc định bằng cách sử dụngappearance: none;

CẬP NHẬT
Tôi đã tải xuống biểu tượng dưới dạng tệp svg mà bạn muốn sử dụng và sử dụng nó làm nền.
Một điều: Tôi đã chuyển đổi nó thành base64 để không sử dụng hình ảnh bên ngoài, nhưng nó không bắt buộc - như tôi đã nói bạn có thể sử dụng làm tệp hình ảnh nền.