效果：

思想：用其他标签配合脚本和隐藏的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. [ Laravel 5.3 文档 ] 安全 ―― API认证（Passport）保障安全性。

    1.简介 Laravel通过传统的登录表单已经让用户认证变得很简单,但是API怎么办?API通常使用token进行认证并且在请求之间不维护session状态.Laravel使用LaravelPassp ...

  2. PHP获取不了React Native Fecth参数的解决办法代码是怎样？

    fetch('https://mywebsite.com/endpoint/', { method: 'POST',headers: {'Accept': 'application/json','Co ...

  3. return break continue

    return 程序返回,不再执行下面的代码(结束当前的方法 直接返回) break 跳出总上一层循环,不再执行循环(结束当前的循环体)continue 跳出本次循环,继续执行下次循环(结束正在执行的循 ...

  4. App store 如何使用 promo code | app store 打不开精品推荐和排行榜

    1. app store 如何使用 promo code: 在app store的 右下角精品推荐标签页,拉到最下面 点击“兑换” ,跳转到新的页面,输入兑换码,然后右上角“兑换”,程序开始自动下载并 ...

  5. ural 1114，计数dp

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1114 题意:N个盒子,a个红球,b个蓝球,把求放到盒子中去,没有任何限制,有多少种放法. ...

  6. js调用MVC3自带js验证

    验证: if ($(this).is("form")) {                        return $(this).validate().checkForm() ...

  7. mysql 用sql语句查询一个表中的所有字段类型、注释

    SELECT column_name,column_comment,data_type FROM information_schema.columns WHERE table_name='表名' AN ...

  8. C#注册表操作，根据键取值

    string into = ""; RegistryKey key = Registry.LocalMachine; RegistryKey myreg = key.OpenSub ...

  9. Til the Cows Come Home(poj 2387 Dijkstra算法（单源最短路径）)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32824   Accepted: 11098 Description Bes ...

  10. 【转载】C++知识库内容精选 尽览所有核心技术点

    原文:C++知识库内容精选 尽览所有核心技术点 C++知识库全新发布. 该知识库由C++领域专家.CSDN知名博客专家.资深程序员和项目经理安晓辉(@foruok)绘制C++知识图谱,@wangshu ...