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

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 }

1、通过标签直接设置：<p style=“background-image：url（images/123.jpg）”>123123</p>。

2、通过css设置：select{background-image：url（images/123.jpg）}。

3、通过js修改$（select）。css（“background-image”，“url（images/123.jpg）”）。

---