CSS - thay đổi thả xuống mũi tên để unicode tam giác

Question

Tôi đã tùy chỉnh của tôi <select> sử dụng như thế này:

background-color:#ececec; 
border:0; 
border:1px solid #e3e3e3; 
border-radius:3px; 
width:100%; 
font-family:'FuturaStdLightOblique', sans-serif; 
font-size:16px; 
color:#616263; 
outline:none; 
height: 40px; 

Nhưng tôi cũng muốn thay đổi danh sách thả xuống của tôi mũi tên vào một cái nhìn phù hợp với thiết kế này. Tôi muốn sử dụng tam giác unicode ▼ (▼) làm cách thay thế cho mũi tên xuống và nếu có thể, hãy đặt nó thành cùng màu với văn bản trong thẻ đã chọn của tôi.

Bất kỳ ý tưởng nào về cách tôi có thể đạt được điều này mà không sử dụng bất kỳ thứ gì ngoài CSS/HTML? Cảm ơn trước.

Answer 1

có thể vậy?

*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    padding: 1rem; 
 
} 
 

 
.b-select-wrap { 
 
    height: 40px; 
 
    width: 240px; 
 
    border: 1px solid #e3e3e3; 
 
    color: #616263; 
 
    overflow: hidden; 
 
    position: relative; 
 
    border-radius: 3px; 
 
} 
 

 
.b-select-wrap:after { 
 
    content: "▼"; 
 
    padding: 12px 8px; 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 0; 
 
    z-index: 1; 
 
    text-align: center; 
 
    width: 10%; 
 
    height: 100%; 
 
    pointer-events: none;  
 
} 
 

 
.b-select { 
 
    height: 40px; 
 
    width: 100%; 
 
    padding: 5px 15px; 
 
    background-color: #ececec; 
 
    border: 0; 
 
    outline: none; 
 
    font-size: 16px; 
 
    -webkit-appearance: none; /* for webkit browsers */ 
 
    -moz-appearance: none; /* for firefox */ 
 
    appearance: none; /* for modern browsers */ 
 
} 
 

 
/* remove default caret for ie */ 
 
.b-select::-ms-expand { 
 
    display:none; 
 
}

<div class="b-select-wrap"> 
 
    <select name="nameValueSelect" class="b-select"> 
 
     <option value="-1" selected>Choose option ...</option> 
 
     <option>Option 1</option> 
 
     <option>Option 2</option> 
 
     <option>Option 3</option> 
 
     <option>Option 4</option> 
 
     <option>Option 5</option> 
 
     <option>Option 6</option> 
 
    </select> 
 
</div>