如何用我自己的箭頭向下圖標製作<select>元素？

Question

我想在所有瀏覽器的select元素的右側有我自己的箭頭圖標。我試圖使用僞元素:after，但它不起作用。

select { 
 
    position: relative; 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    &:after { 
 
    content: 'f175'; 
 
    font-size: 12px; 
 
    position: absolute; 
 
    z-index: 999; 
 
    top: 0px; 
 
    right: 13px; 
 
    } 
 
}

<select name="" size="1"> 
 
    <option value="wybierz z listy">wybierz z listy</option> 
 
    <option value="Normal">Normal</option> 
 
    <option value="High">High</option> 
 
    <option value="Emergency">Emergency</option> 
 
</select>

Answer 1

您可以使用圖像像下面

select { 
 
    position: relative; 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    padding: 5px; 
 
    width: 120px; 
 
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center; 
 
}

<select name="" size="1"> 
 
    <option value="wybierz z listy">wybierz z listy</option> 
 
    <option value="Normal">Normal</option> 
 
    <option value="High">High</option> 
 
    <option value="Emergency">Emergency</option> 
 
</select>

Answer 2

試試這個：

select { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    background: transparent; 
 
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); 
 
    background-repeat: no-repeat; 
 
    background-position-x: 100%; 
 
    background-position-y: 5px; 
 
    border: 1px solid #dfdfdf; 
 
    border-radius: 2px; 
 
    margin-right: 2rem; 
 
    padding: 1rem; 
 
    padding-right: 2rem; 
 
}

<select name="" size="1"> 
 
    <option value="wybierz z listy">wybierz z listy</option> 
 
    <option value="Normal">Normal</option> 
 
    <option value="High">High</option> 
 
    <option value="Emergency">Emergency</option> 
 
</select>

Answer 3

剛剛從你的CSS刪除下面的風格，也將努力

-webkit-appearance: none; 
-moz-appearance: none;