效果：

思想：用其他标签配合脚本和隐藏的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. 执行maven-build.cmd失败

    执行maven-build.cmd失败,显示:"Non-resolvable parent POM: Could not transfer artifact ......",如截图 ...

  2. 错误代码：ERR_UNSAFE_PORT

    修改下应用的端口为7788就好了:http://localhost:7788/taiping-sol-insu-vehicle/vehicleEntrance.action. 这个主要是chrome的 ...

  3. Oracle同义词创建及其作用

    Oracle的同义词(synonyms)从字面上理解就是别名的意思,和试图的功能类似,就是一种映射关系.本文介绍如何创建同义词语句,删除同义词以及查看同义词语句. oracle的同义词总结: 从字面上 ...

  4. Unity重力的测试

    其实和想象的结果还是有点出入 斜坡测试 (非悬空,直接把地面旋转成斜坡) 在非悬空状态下是不会受到斜坡的影响,只有进入悬空再进入斜坡,才会滑下去 一帧内关闭碰撞器再打开,或者一帧内打开Trigger再 ...

  5. 华东交通大学2016年ACM“双基”程序设计竞赛 1002

    Problem Description 今天小学弟又训练完了,但是小学弟又不想看球赛,于是小学弟看马赛了.他发现马鞍是一个奇怪的东西.于是小学弟根据马鞍定义了一种马鞍数:在一个二位矩阵中,马鞍数在当前 ...

  6. 2016年10月17日 星期一 --出埃及记 Exodus 19:1

    2016年10月17日 星期一 --出埃及记 Exodus 19:1 In the third month after the Israelites left Egypt--on the very d ...

  7. Maven打jar发布包的常用配置

    1.修改pom.xml增加如下内容 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifac ...

  8. django下的ckeditor 5.0 文本编辑器上传功能。

    完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...

  9. .Net连接数据库-曾,删,改,查(AOD.Net)

    连接数据库 static void Main(string[] args) { //SqlConnection conn = new SqlConnection();//实例化 //conn.Conn ...

  10. CodeForces 478C Table Decorations

    Table Decorations Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u ...