css下拉框背景颜色

最近做前端的小伙伴们肯定会遇到下拉框，下拉框的样式要怎么设置呢？其中，下拉框的背景颜色就很关键啦。在CSS中，下拉框的背景颜色有几种不同的设置方法，我们来一一了解下。

第一种方法：使用background-color属于设置背景颜色
<p>下拉框的背景色设置最常用的方式就是使用background-color属性。只需要选择需要的颜色即可，例如下面这段代码可以把下拉框的背景变为红色。</p>
<pre>
select {
  background-color: red;
} 

有时我们发现设置了background-color属性之后下拉框的背景色还是不变，这时可以使用-webkit-appearance属性进行控制。该属性可以让浏览器使用指定的样式来渲染下拉框。

select {
  -webkit-appearance: none;
  background-color: red;
} 

还有一种设置背景色的方法是使用background-image属性。通过设置图片，来实现下拉框的背景样式。下面的代码可以把背景设为渐变颜色效果。

select {
  background-image: linear-gradient(to right, #f00, #00f);
}