欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS特效 >

jQuery+CSS实现select列表菜单表单样式美化

DIV+CSS+jQuery表单美化SELECT列表菜单方法与代码

SELECT美化下拉菜单表单截图
SELECT下拉列表菜单美化效果截图-SELECT美化后的列表菜单表单控件效果图

我们使用CSS控制表单输入框样式美化没问题、CSS设置按钮表单样式没问题,比较头疼的是一般CSS是不能单纯像输入框、按钮设置美化,单纯使用CSS美化html SELECT无效,至少IE6、IE7等浏览器不支持CSS样式美化。这个时候divcss5整理一个使用JQ+DIV+CSS来美化form SELECT菜单下拉列表表单控件。

扩展阅读html select基础select下拉列表菜单网址跳转select下拉列表菜单

SELECT美化目录
  1. SELECT表单样式美化原理
  2. SELECT美化特效代码
  3. 应用说明
  4. 下拉菜单在线样式
  5. 表单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代码:

  1. <SCRIPT type=text/javascript> 
  2. $(document).ready(function() { 
  3. $("#c").selectbox(); 
  4. $("#b").selectbox(); 
  5. $("#d").selectbox(); 
  6. $("#e").selectbox(); 
  7. $("#f").selectbox(); 
  8. $("#g").selectbox(); 
  9. }); 
  10. </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高度属性。

三、应用说明   -   TOP

SELECT美化特效,包含了JQ、CSS、HTML代码3部分,特别说明是HTML中SELECT的唯一id命名设置一定要是唯一并且与HTML中一段JS对应上。至于任何样式的美化就更加你需要调整CSS来实现,最终注意宽度高度背景文字大小CSS字体等细节样式根据自己需求设置即可。

四、表单美化在线演示   -   TOP

下拉列表表单SELECT在线演示http://www.divcss5.com/yanshi/2013012401/

五、表单SELECT美化打包下载   -   TOP

完整版打包下载

下载后根据现在打包里完整表单SELECT美化特效样式进行灵活运用,设置好宽度、高度、CSS背景颜色即可适用您所需。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao371.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-01-24 10:18 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。