自定义 html select下拉选择样式讲解

知道91 | 站长推荐 | 2014-03-11 | 阅读:9369

HTML 的select 对于不同的浏览器有不同的样式,这样给前台开发人员带来很多困扰,本文就介绍怎样自定义select样式。

网上也许有相关的插件,但是单独为您一个控件样式去使用一个插件感觉给网站带来冗余的感觉,所以我的建议是自定义样式,其实要实现自定义select下拉选择框的样式是要在select上面覆盖一层,这样我们看到的样式就会覆盖掉原来的select的样式,这样就实现了自定义,对于选择的改变我们可以使用select的onchange事件来将选择的内容显示到选择框中,废话不多说,我们直接上代码。

请从下面选择

效果如下图所示:

js+css实现模拟自定义select样式示意图

注:如果想要获取返回的是选中的option的value值,可以使用下面的代码

var opt=this.getElementsByTagName("option");
var len=opt.length;
for(i=0;i

就是这么简单就可以实现js+css的自定义select样式,好了赶紧去尝试一下吧。