css下拉框箭头颜色修改

CSS下拉框是网页设计中常用的组件，但是默认的下拉框箭头颜色通常是黑色或白色。如果要让箭头和下拉框的背景颜色匹配或者更加美观，就需要修改箭头的颜色。

修改下拉框箭头颜色的方法有两种，一种是使用CSS3的伪元素，另一种是使用图片。下面分别介绍这两种方法。

使用CSS3的伪元素

select{
    appearance: none; /*去除默认样式 */
    -webkit-appearance: none; /*Safari和Chrome */
    -moz-appearance: none; /*Firefox */
    background: url("down-arrow.png") no-repeat right center; /*添加自定义箭头 */
    padding-right: 15px; /*为箭头留出空间 */
}

select::-ms-expand {
    display: none; /*IE11去掉下拉箭头 */
} 

上面的代码中，使用了CSS3的appearance属性去除了默认的下拉框样式，然后使用了background属性添加了自定义的箭头图片，并且使用padding-right属性为箭头留出了空间。如果是IE11浏览器，还需要使用select::-ms-expand伪元素把下拉箭头隐藏掉。

使用图片

select{
    background-color: #fff;
    background-image: url("down-arrow-red.png");
    background-position: right center;
    background-repeat: no-repeat;
    border: none;
    padding: 8px 32px 8px 8px;
} 

上面的代码中，使用了background-image属性添加了自定义箭头的图片，然后使用background-position属性调整了箭头的位置，最后使用了padding属性调整了下拉框的边距。如果要修改箭头的颜色，只需要更改箭头图片即可。

总之，无论是使用CSS3的伪元素还是使用图片，修改下拉框箭头颜色都是非常简单的。只需注意背景颜色和箭头颜色的搭配，就可以让下拉框更加美观。