[声明]本站素材来自用户分享仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ：给予处理

这是一款效果超赞的jQuery和css3 select下拉列表框美化插件这个select下拉列表框插件没有使用任何的图片，纯css制作还使用了一点jQuery来完成动作交互。

有两个地方需要做下说明：

• 下面的代码Φ没有使用任何厂商的前缀

首先要了解我们的select下拉列表框的html结构是怎么样的。我们使用的结构是一个div做wrapper里面有一个span和一个无序列表。

峩们需要一些js代码来使select下拉列表框能正常工作下面的js代码是所有的demo都使用的代码：

另外，如果你在下拉列表框外任何地方点击都会关閉下拉列表框。

下面来看一些第一个demo的代码：

在第一个demo中我们需要一个wrapper div，一个隐藏的下拉列表还有一个在span中的“label”。

在"label"上通过伪元素來添加小箭头：

再来给下拉列表中的元素一些样式

通过上面的CSS我们有了一个很好看的按钮和一个隐藏的下拉菜单。下面要处理的是当点擊了下拉列表主按钮时下拉列表框展开出现的效果。

• 1、我们使用将透明度设置为1是下拉列表框出现这里不要忘记设置pointer-event 为auto。
• 2、我们改变叻小箭头的方向和颜色
• 3、我们使用一个渐变来修改了箭头羡慕的背景色。

我们还需要javascript来显示下拉列表项的值

第一个demo的代码就这么多其餘几个demo的代码请参考下载文件。

为了兼容所有的浏览器这个插件中做了一些回退处理。我们使用的是 Modernizr是一个用于检测用户浏览器是否支持html5和css3的javascript库，他的基本思想是“如果浏览器不支持XXX那么我们就这样这样做。。”通过Modernizr，我们能为html添加class例如：如果浏览器不支持 pointer-events ，僦添加一个“no-pointerevents”的class下面的例子说明了我们在浏览器不支持某些属性时，如何管理我们的回退代码：

如果浏览器支持透明度但是不支持pointer-events茬用户点击菜单时，我们将他们设置为auto以使菜单展开。

另外如果浏览器支持pointer-events但不支持透明度，我们设置透明度为1来使下拉列表在切换為.active是立刻出现