修改下拉列表<select>的默认css样式_select option 第一样式-CSDN博客

本文链接：https://blog.csdn.net/beimingmuyu/article/details/50996815

使用原生css效果，实现一个网站主页常见的下拉菜单效果：

1、HTML页面布局

html实现如下：

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

默认样式是这样的：

2、CSS样式效果

加入CSS样式

需要注意的几点：

1、border：solid 5px #FFF；这是一个白色的5像素的边框，因为网页背景色默认是白色，这就会使select这个元素看上去好像比外面的form元素小。

2、appearance属性使 div 元素看上去像一个按钮，默认是normal，设置成none就会不显示出默认小箭头。其中-moz和-webkit分别给火狐和谷歌浏览器单独下命令。

3、用来显示出大白色箭头的arrow.png自己在Photoshop里画一个就可以了，要注意的是IE6更早的不支持png24 。

（↓↓↓下图因为是白色箭头图所以看不见了）

↑↑↑这里真的有个图，嗯。。

下面是CSS部分：

  <style><span style="white-space:pre">	</span>form{background:#FE4C40;}
  select{

  border: solid 5px #FFF;

   appearance:none;
  -moz-appearance:none;    /*for firefox*/     
  -webkit-appearance:none;    /*for chrome*/
  
  padding-right: 10px;
  color:#FFF;
  font-size: 30px;
  
    width: 200px;
   height: 50px;
   overflow: hidden;
   background: url(arrow.png) no-repeat right #FF9900;
  }
  option{ color:#FFF;}

</style>