怎么设置<select>下拉列表的背景和下拉的小三角样式

html-css012

怎么设置<select>下拉列表的背景和下拉的小三角样式,第1张

select {

  /*背景：和其他元素一样，都是设置 background 属性*/

  background:#F00

 

  /*三角1：先将默认的select选择框样式清除*/

  appearance:none

  -moz-appearance:none

  -webkit-appearance:none

 

  /*三角2：在选择框的最右侧中间显示小箭头图片*/

  background: url('XXXXXX/XXXXXX/XXXXXX/xxxxxx.png') no-repeat scroll right center transparent  

 

  /*三角3：为下拉小箭头留出一点位置，避免被文字覆盖*/

  padding-right: 14px

  

}

 

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/

select::-ms-expand { display: none }

一。使用JS+CSS，利用CSS设置属性，通过onchange触发事件，或者JS对标签的控制，完成对<select>的美化，也能够达到兼容的目的。

二。使用Jquery，这个方法能够实现很多炫目的select特效，但是封装过程和调用过程不是很容易理解，另外，如果遇到联级select的调用方式，很容易出错。

三。仍是利用Jquery+CSS的方式，通过使用其他div标签仿<Select>来实现。

JQ的话，在站酷上可以搜索到，很漂亮的效果。。。