效果：

思想：用其他标签配合脚本和隐藏的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. Android消息处理机制(Handler 与Message)---01

    一.handler的使用场景为么会有handler?(部分内容图片摘自http://www.runoob.com/w3cnote/android-tutorial-handler-message.ht ...

  2. c#使用word、excel、pdf ——转

    一.C# Word操作引入Word COM组件菜单=>项目=>添加引用=>COM=>Microsoft Word 11.0 Object Libraryusing Word = ...

  3. 【Pro ASP.NET MVC 3 Framework】.学习笔记.11.ASP.NET MVC3的细节：概览MVC项目

    书Adam The Definitive Guide to HTML5 Adam Applied ASP.NET 4 in Context and Pro ASP.NET 4 到此为止,我们已经学了为 ...

  4. Sqoop安装及操作

    一.集群环境: Hostname IP Hadoop版本 Hadoop 功能 系统 node1 192.168.1.151 0.20.0 namenode hive+sqoop rhel5.4X86 ...

  5. Unix/Linux编程实践教程（二：socket、多线程、进程间通信）

    同一接口不同的数据源: 协同进程: fdopen以文件描述符为参数: fopen和popen: 为了实现popen,必须在子进程中调用sh,因为只有shell本身即/bin/sh可以运行任意shell ...

  6. android应用的数据应该保存到哪儿

    王永超王永超嫖娼 做android app开发会涉及到不同数据的保存,比如数据缓存,客户登陆信息保存,客户状态的保存等等. 那针对这不同的数据我们应该保存在什么地方呢? 1.应用卸载也不会删除的数据 ...

  7. 【转】在Eclipse中配置tomcat

    转载地址: http://kin111.blog.51cto.com/738881/163096 为了在Eclipse中进行struts2的测试,才发现自己机器上的Eclipse没有集成Tomcat, ...

  8. YTU 3001: 判断操作是否合法（栈和队列）

    3001: 判断操作是否合法(栈和队列) 时间限制: 1 Sec  内存限制: 128 MB 提交: 4  解决: 2 题目描述 假设以I和O分别表示进栈和出栈操作,栈的初态和终态均为空,进栈和出栈的 ...

  9. hdu1024 Max Sum Plus Plus

    动态规划,给定长度为n(≤1e6)的整数数组和整数m,选取m个连续且两两无交集的子区间,求所有方案中使得区间和最大的最大值. dp[i][j]表示结束位置(最后一个区间最后一个元素的位置)为i且选取区 ...

  10. zoj Gao The Sequence

    Gao The Sequence Time Limit: 2 Seconds      Memory Limit: 65536 KB You are given a sequence of integ ...