css3怎样去掉select中三角箭头的背景

html-css08

css3怎样去掉select中三角箭头的背景,第1张

用插件:select2.js 百度搜索那个名字即可,现在基本是最好用的下拉组件。

原理就是将原来的select隐藏,用新的div构建一个下拉菜单,遮盖在原来的位置。

自己做的话,可以试试在select上覆盖一个div层,用绝对定位。然后把select的透明度opacity写为0.01,不能为0,然后点击那个层,就相当与点击了那个select,div写什么就由你定了。

div{

width: 20px

height: 20px

border: 2px solid #000

border-top: none

border-right: none

transform:rotate(45deg)

}

这个箭头就是CSS3做的,需要现代浏览器支持。

鼠标移动上去就是:hover 伪类样式控制的。

左右滑动需要JS支持。

demo:http://www.jq22.com/demo/960f34b4-5478-11e4-9736-00163e001348/