DIV+CSS+jQuery表单美化SELECT列表菜单方法与代码
SELECT下拉列表菜单美化效果截图-SELECT美化后的列表菜单表单控件效果图
我们使用CSS控制表单输入框样式美化没问题、CSS设置按钮表单样式没问题，比较头疼的是一般CSS是不能单纯像输入框、按钮设置美化，单纯使用CSS美化html SELECT无效，至少IE6、IE7等浏览器不支持CSS样式美化。这个时候HTML8整理一个使用JQ+DIV+CSS来美化form SELECT菜单下拉列表表单控件。
扩展阅读：html select基础、select下拉列表菜单网址跳转、select下拉列表菜单
- SELECT美化目录
一、SELECT表单样式美化原理
我们用DIV CSS布局让SELECT表单隐藏，JQ取出列表SELECT数据和值，再通过DIV CSS来重新模拟表单美化后样式。我们实际看到美化后表单下拉菜单是JQ模拟出的通过DIV+CSS实现下拉效果，通过选择下拉列表值JQ再赋予SELECT选择值。
二、SELECT美化特效代码
1、JS代码
JS代码分为html引入外部2个JQuery文件（JS文件），html内部一个JS类声明。
注意是这部分JS代码：
- <SCRIPT type=text/javascript>
- $(document).ready(function() {
- $("#c").selectbox();
- $("#b").selectbox();
- $("#d").selectbox();
- $("#e").selectbox();
- $("#f").selectbox();
- $("#g").selectbox();
- });
- </SCRIPT>
放于SELECT代码之后，这里“#c”“#b”。。。需要与SELECT的id对应并且唯一性。
2、HTML代码
这里HTML代码不再列出，大家可下载此特效压缩包自己分析查看。
这里注意是SELECT设置的ID必须与JS里声明“$("#ID").selectbox();”保持一致。
3、CSS代码
这里CSS代码通过html引入css文件实现，具体CSS代码详见打包文件里CSS文件。
CSS代码主要是设置SELECT背景图片，css宽度，css高度属性。
三、应用说明
SELECT美化特效，包含了JQ、CSS、HTML代码3部分，特别说明是HTML中SELECT的唯一id命名设置一定要是唯一并且与HTML中一段JS对应上。至于任何样式的美化就更加你需要调整CSS来实现，最终注意宽度、高度、背景、文字大小、CSS字体等细节样式根据自己需求设置即可。
四、表单美化在线演示
下拉列表表单SELECT在线演示：//www.yfnd.net/yanshi/2013012401/
五、表单SELECT美化打包下载
完整版打包下载：
下载后根据现在打包里完整表单SELECT美化特效样式进行灵活运用，设置好宽度、高度、CSS背景颜色即可适用您所需。