怎么做 <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 { -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 2

只需從CSS中刪除以下樣式即可

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

Answer 3

您可以使用下面的圖像

 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>