CSS - 改變下拉箭頭爲unicode三角形

Question

我用這樣的定製我的<select>：

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; 

但我也想改變我的下拉箭頭，進去一看適合這種設計。我想用Unicode的三角形▼（▼）作爲替代的向下箭頭，如果可能的話，將其設置爲相同的顏色在我的選擇標籤的文本。

我如何能做到這一點，而無需使用任何除了CSS/HTML的任何想法？提前致謝。

Answer 1

也許這樣的嗎？

*, *: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>