CSS - zmiana rozwijana strzałka na Unicode trójkąta

Question

Mam dostosowane moich <select> używając tak:

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; 

Ale chcę zmienić moje rozwijaną strzałkę na wygląd, który pasuje do tego projektu. Chciałbym użyć trójkąta unicode ▼() jako alternatywy dla strzałki w dół i jeśli to możliwe, ustawić ten sam kolor, co tekst w moim znaczniku wyboru.

Jakieś pomysły na to, jak mogę to osiągnąć bez użycia czegokolwiek poza CSS/HTML? Z góry dziękuję.

Answer 1

może tak?

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