原理就是将原来的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/