css改变下拉框的下拉小三角样式

html-css014

css改变下拉框的下拉小三角样式,第1张

select{

width: 90%

padding: 8px 0

font-size: 14px

border: none

outline: none

appearance: none

-webkit-appearance: none

-moz-appearance: none

}

div:after{

content: ""

width: 13px

height: 7px

background: url(../../../images/about/sanjiaoxing2.png) no-repeat center

-webkit-background-size: 100% 100%

background-size: 100% 100%

position: absolute

right: 20px

top: 45%

//给自定义的图标实现点击下来功能

pointer-events: none

}

CSS设置不了select 那个三角形的样式的。、IE浏览器更是连select的边框什么的都不能设置，如果需要外观很好看的下拉框，建议用js+css实现，此时“小三角形就可以用图片代替”， 再对应鼠标的悬停，离开事件即可达到完美好看的效果。

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 }