Có thể sử dụng biểu tượng Phông chữ tuyệt vời để chọn dấu mặc định thả xuống

Question

Tôi muốn sử dụng phông chữ tuyệt vời "fa-chevron-down" biểu tượng thay vì html chọn kiểu mặc định hộp. Vui lòng xem hình ảnh đính kèm.

Answer 1

Bạn có thể làm điều này với các lớp học giả. Tôi làm theo các bước here và sửa đổi bằng cách loại bỏ các biến đổi, sử dụng FontAwesome như phông chữ của tôi, và UTF-8 cho các biểu tượng như nội dung as instructed here:

select { 
 
padding:4px; 
 
margin: 0; 
 
background: #fff; 
 
color:#888; 
 
border:none; 
 
outline:none; 
 
display: inline-block; 
 
-webkit-appearance:none; 
 
-moz-appearance:none; 
 
appearance:none; 
 
cursor:pointer; 
 
width: 150px; 
 
-webkit-border-radius: 0px; 
 
-moz-border-radius: 0px; 
 
border-radius: 0px; 
 
} 
 

 
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ 
 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
 
select {padding-right:18px} 
 
} 
 

 
label {position:relative} 
 
label:after { 
 
content:"\f078"; 
 
font-family: "FontAwesome"; 
 
font-size: 11px; 
 
color:#aaa; 
 
right:8px; top:4px; 
 
padding:0 0 2px; 
 
position:absolute; 
 
pointer-events:none; 
 
} 
 
label:before { 
 
content:''; 
 
right:4px; top:0px; 
 
width:23px; height:18px; 
 
background:#fff; 
 
position:absolute; 
 
pointer-events:none; 
 
display:block; 
 
}

Here's a codepen in action.