DIV+CSS+jQuery表单美化SELECT列表菜单方法与代码
SELECT下拉列表菜单美化效果截图-SELECT美化后的列表菜单表单控件效果图
我们使用CSS控制表单输入框样式美化没问题、CSS设置按钮表单样式没问题,比较头疼的是一般CSS是不能单纯像输入框、按钮设置美化,单纯使用CSS美化html SELECT无效,至少IE6、IE7等浏览器不支持CSS样式美化。这个时候divcss5整理一个使用JQ+DIV+CSS来美化form SELECT菜单下拉列表表单控件。
一、SELECT表单样式美化原理 - TOP
我们用DIV CSS布局让SELECT表单隐藏,JQ取出列表SELECT数据和值,再通过DIV CSS来重新模拟表单美化后样式。我们实际看到美化后表单下拉菜单是JQ模拟出的通过DIV+CSS实现下拉效果,通过选择下拉列表值JQ再赋予SELECT选择值。
二、SELECT美化特效代码 - TOP
1、JS代码
JS代码分为html引入外部2个JQuery文件(JS文件),html内部一个JS类声明。
注意是这部分JS代码:
$(document).ready(function() {
$("#c").selectbox();
$("#b").selectbox();
$("#d").selectbox();
$(&#