效果：

思想：用其他标签配合脚本和隐藏的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. Java中的线程同步机制

    一.首先为什么线程需要同步? 1.多线程安全问题的原因      A:有多线程环境      B:有共享数据      C:有多条语句操作共享数据 2. //未完待续后面会继续更新

  2. React Native学习笔记-1：JSC profiler is not supported.

    新建React-Native工程,直接编译运行报错,控制台错误信息如下: 2016-02-22 16:49:47.317 [info][tid:com.facebook.React.JavaScrip ...

  3. [BIM]BIM中IFC介绍

    ifc是干什么的,看下图 ifc架构图 下文转自:http://www.bimcn.org/cjwt/201506053789.html IFC目前是国际通用的BIM标准,现在很多BIM软件都采用其作 ...

  4. Poj(1466)，最大独立集，匈牙利算法

    题目链接:http://poj.org/problem?id=1466 Girls and Boys Time Limit: 5000MS   Memory Limit: 10000K Total S ...

  5. 循环嵌套，while循环，穷举迭代循环

    一.循环嵌套 简单的就是说,在一个for循环里嵌入多个小for循环. 其中,在打矩形.三角形和乘法口诀表之类的题目中,大for循环一般表示的是行数,其余的小for循环式每一行中的内容. 二.while ...

  6. AB串（上帝都不会，我就没救了）

    [题目分析] 设答案的长度为m,

  7. MSComm函数说明（来自网络）

    CommPort 设置并返回端口号 void CMSComm::SetCommPort(short nNewValue) short CMSComm::GetCommPort() RThreshold ...

  8. iOS中3种正则表达式的使用与比较

    正则表达式在用户注册和登录中应用很广,通过正则表达式可以判断用户输入的数据正确与否. 在iOS4.0以前开发者一般是通过谓词(NSPredicate)和加入正则表达式的第三方库(如:RegexKitL ...

  9. 关于mysql varchar 类型的最大长度限制

    Row size too large. The maximum row size for the used table type, not counting BLOBs, is 65535. This ...

  10. Recast & Detour & TerrainExport Study Feeling

    Recast Navigation和Terrain Export终于算是有点成果了.今天作一个简单的总结,顺便写一些话激励自己. 这个项目的成功对于我这个算法又烂,而又不懂3d图形学的人来说,感觉真是 ...