Question

怎样改变<select>箭头（按钮）的颜色

Answer 1

<div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select></div>//下拉箭头保持不变。没有直接美化它的方式，但解决方案还是非常简单的，首先我们需要用一个div容器包裹在select元素外围.styled-select { width: 240px; height: 34px; overflow: hidden; background: url(new_arrow.png) no-repeat right #ddd;}/*下一步我们需要加入一些css，以确保选择框元素被以某种方式美化：我们需要确保选择框的跨度比外围的div容器更宽，这样默认的下拉箭头就会消失（选择框比外面的div宽大，默认的下拉箭头就会被隐藏）我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置就是用图片把原下拉箭头覆盖*/.styled-select select { background: transparent; width: 268px; padding: 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; /*for chrome*/}