简单js+css实现模拟自定义select样式
对于select这个标签在各个浏览器下的显示样式都不相同,这就给设计师和前端开发者带来了极大的不方便。所以做出一个统一的样式的select样式是最直接的需求。 那么如何实现不同的浏览器下,有着相同样式的select呢? 下面看下本人的方法: 该方法主要用到的是js+css,代码量小,无插件 自定义select的样式 兼容性方面嘛,ie6可以无视了。 实现原理:(js+css模拟select样式)将select的标签元素,设置opacity:0隐藏掉,并给其设置z-index将其移动到最上层。这样在点击外围box的时候,实际上是点击了select。 然后通过select的onchange事件,将选中的数据赋值到span元素中显示出来。