更改下拉箭头的颜色和外观

Question

我想更改下拉列表箭头的默认外观，以便在浏览器中看起来相同。有没有一种方法可以使用CSS或其他方式覆盖下拉箭头的默认外观？

Answer 1

您可以使用CSS来实现此目的，但是您并没有在技术上更改箭头本身。在此示例中，我实际上是隐藏默认箭头，而是显示自己的箭头。.styleSelect select {&nbsp; background: transparent;&nbsp; width: 168px;&nbsp; padding: 5px;&nbsp; font-size: 16px;&nbsp; line-height: 1;&nbsp; border: 0;&nbsp; border-radius: 0;&nbsp; height: 34px;&nbsp; -webkit-appearance: none;&nbsp; -moz-appearance: none;&nbsp; appearance: none;&nbsp; color: #000;}.styleSelect {&nbsp; width: 140px;&nbsp; height: 34px;&nbsp; overflow: hidden;&nbsp; background: url("images/downArrow.png") no-repeat right #fff;&nbsp; border: 2px solid #000;}<div class="styleSelect">&nbsp; <select class="units">&nbsp; &nbsp; <option value="Metres">Metres</option>&nbsp; &nbsp; <option value="Feet">Feet</option>&nbsp; &nbsp; <option value="Fathoms">Fathoms</option>&nbsp; </select>