效果：

思想：用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{margin: 0;padding: 0}

.selectList{width: 500px;margin: 50px auto;display: block;width: 320px;}

.selectValue{position: relative;height: 40px;border: 5px  solid #00b0c6;padding-left: 10px;}

.valueCon{display: inline-block;width: 100%;height: 40px;line-height: 40px;}

.selectValue i{background: url(select.png) no-repeat;height: 18px;width: 22px;display: inline-block;position: absolute;right: 11px; top: 12px;}

.onclick_i{background-position: 0 -14px  !important;}

.selectCon{list-style: none;line-height: 25px;border: 1px #ccc solid;display: none}

.selectCon li{padding-left: 15px;cursor: pointer;}

.block{display: block}

.selectCon li:hover{color: #00b0c6;transition: all 0.4s ease 0s;background: #ccc;}

</style>

     <script  src="jquery-1.11.1.min.js"></script> 

     <script type="text/javascript">

      $(function(){

     

      $(".selectCon li").click(function(event) {

      $(".valueCon").text($(this).text());

      $(".selectValue input").val($(this).text())

      $(".selectCon").toggleClass('block');

      $(".selectValue i").toggleClass('onclick_i');

      });

      $(".valueCon").click(function(event) {

      $(this).siblings('i').toggleClass('onclick_i').parents('.selectList').find('.selectCon').toggleClass('block');





      });





      })

     </script>





</head>

<body>

<form action="#">

<label  class="selectList">

<div class="selectValue">

<span class="valueCon">fdgfd</span>

<input type="hidden"   value="请输入名称" >

<i></i>

</div>

<ul class="selectCon">

<li>200 Q</li>

<li>300 Q</li>

<li>400 Q</li>

<li>500 Q</li>

<li>600 Q</li>

<li>700 Q</li>

<li>800 Q</li>

</ul>







</label>

</form>

</body>

</html>

表单美化-原生javascript和jQuery下拉列表（兼容IE6）的更多相关文章

  1. 表单美化-原生javascript和jQuery多选按钮（兼容IE6）

    前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...

  2. 表单美化-原生javascript和jQuery单选按钮（兼容IE6）

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  3. JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...

  4. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  5. jQuery星级评论表单美化代码

    最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...

  6. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  7. HTML5——表单美化

    闲聊: 今天小颖在跟着慕课网学习:表单美化 看完了自己跟着敲了敲,顺便做个笔记嘻嘻,好记性不如烂笔头,脑子记不住,就写成笔记,以后也方便查看,嘻嘻. 正文: 1.表单美化_单选按钮篇 2.表单美化_复 ...

  8. BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  9. iCheck表单美化插件使用方法详解（含参数、事件等）

    iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...

随机推荐

  1. JS和CSS的多浏览器兼容(3)

    3.Javascript的浏览器兼容性问题 3.1 集合类对象问题说明:IE下,可以使用()或[]获取集合类对象; Safari及Chrome下,只能使用[]获取集合类对象. 解决方法:统一使用[]获 ...

  2. 虚拟机 本地 本机 双启动 运行 vhd local Dual Boot

    在使用虚拟机的过程中, 可能会遇到虚拟机的运行要求过高, 电脑力不从心的情况. 为了让虚拟机使用更多电脑资源, 可以让虚拟机以本地双系统的方式,访问本地计算机资源. 打开磁盘管理,在磁盘上右键,选择 ...

  3. MySQL Replication的Reset slave重置命令

    有时要清除从库的所有复制信息,如切换为不同的Master, 主从重做等:Reset slave是一个比较危险的命令,所以在执行前一定要准备知道其含义. 1. 命令在slave上执行,执行前一定要停掉s ...

  4. 关于Quartus II 13.0对应开发NIOS II软件程序时报错Symbol 'NULL' could not be resolved问题的解决方法

    关于Quartus II 13.0对应开发NIOS II软件程序时报错Symbol 'NULL' could not be resolved问题的解决方法 近期在评估使用NIOS II处理器进行项目的 ...

  5. 如何获取各大平台的播放地址（获得优酷的m3u8播放地址）为例

    1.打开safari 2.在顶部(黑色小苹果)旁边,点击safari. 3.打开里面的 偏好设置. 4.在高级 中 找到 “在菜单栏中显示开发菜单” 并打勾. 5.关闭窗口后,可以发现safari 顶 ...

  6. Volley Get Post 方法

    Get String url = CommonInterfaceUrl.COMM_GetWorksDetailUrl + "/" + worksID; RequestQueue m ...

  7. JavaEE基础（二十一）/IO流

    1.IO流(字符流FileReader) 1.字符流是什么 字符流是可以直接读写字符的IO流 字符流读取字符, 就要先读取到字节数据, 然后转为字符. 如果要写出字符, 需要把字符转为字节再写出. 2 ...

  8. vscode使用php调试

    1:首先查看是否安装xdebug扩展 打开终端  ➜ ~ php -vPHP 5.6.24 (cli) (built: Jul 21 2016 14:27:54) Copyright (c) 1997 ...

  9. SecureCRT issue "Could not open clipboard: Assess is denied" (无法打开粘贴板:访问被拒绝)

    I got an issue when copying some line/word (actually just select the context ) in the Linux terminal ...

  10. [cdoj843] 冰雪奇缘 （线段树+离散）

    [线段树 + 离散化] Description 艾莎女王又开始用冰雪魔法盖宫殿了. 她决定先造一堵墙,于是释放魔法让形为直角梯形的冰砖从天而降,定入冻土之中. 现在你将回答女王的询问:某段冻土上冰砖的 ...