• 紫光阁中共中央国家机关工作委员会 2020-02-23
  • 看见什么有用?[猜想] 2020-02-23
  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

    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

    我们用时时彩走势图后一让SELECT表单隐藏,JQ取出列表SELECT数据和值,再通过时时彩走势图后一来重新模拟表单美化后样式。我们实际看到美化后表单下拉菜单是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.cuhw.com.cn/yanshi/2013012401/

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

    完整版打包下载

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

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

  • 紫光阁中共中央国家机关工作委员会 2020-02-23
  • 看见什么有用?[猜想] 2020-02-23
  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14