因为原生的下拉框不能修改其属性，很难美化下拉框。

所以自己用div简单自定义了一下下拉框，想美化直接修改css即可

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>div模仿下拉框</title>

<style>

*{

    padding: 0;

    margin: 0;

}

.select-box{

    width: 200px;

    margin: 50px auto;

    text-align: left;

    text-indent: 5px;

    /* border: 1px solid #ccc; */

    padding: 10px;

}

.select-box .select-title{

    height: 30px;

    line-height: 30px;

    display: block;

    margin-bottom: 10px;

    border: 1px solid #ccc;

    padding: 5px 10px;

    cursor:pointer;

}

.select-box ul{

    border: 1px solid #ccc;

}

.select-box ul li{

    height: 30px;

    line-height: 30px;

    list-style: none;

    padding: 5px 10px;

    cursor: pointer;

}

.select-box ul li.current{

    background: #ebebeb;

}

.select-box ul li:not(:last-of-type){

    border-bottom: 1px solid #ccc;

}

.none{

    display: none;

}

.block{

    display: block;

}

</style>

</head>

<body>

    <div class="select-box">

        <span class="select-title">web前端</span><!-- 下拉标题 -->

        <ul class="select-con none">

            <li>web前端</li>

            <li>php</li>

            <li>java</li>

            <li>ios</li>

            <li>安卓</li>

        </ul>

    </div>

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

<script>

    $(document).bind("click",function(e){

        var clickMe=$(e.target);/*获取点击元素*/

　　　　　　if(!clickMe.hasClass("select-title")){/*点击元素不是下拉框标题时*/
　　　　　　　　$(".select-box ul").addClass("none").removeClass("block");
　　　　　　　　if(clickMe.parent().hasClass("select-con")){/*点击元素是下拉选项时*/
　　　　　　　　　　var currenLiHtml=clickMe.html();/*获取点击的下拉选项HTML*/
　　　　　　　　　　clickMe.parent().siblings(".select-title").html(currenLiHtml);/*把点击的下拉选项HTML放到下拉标题*/
　　　　　　　　　　clickMe.addClass("current").siblings().removeClass("current");/*给点击的下拉选项加背景色*/
　　　　　　　　}
　　　　　　}else if(clickMe.siblings(".select-con").hasClass("none")){/*点击下拉标题时如果有none类的话*/
　　　　　　　　clickMe.parents("body").find(".select-con").addClass("none").removeClass("block");/*点击下拉标题时如果有none类的话,全部下拉关闭，然后在展开当前的下拉*/
　　　　　　　　clickMe.siblings(".select-con").addClass("block").removeClass("none");

　　　　　　　　}else if(clickMe.siblings(".select-con").hasClass("block")){/*点击下拉标题时如果有block类下拉是展开的话*/
　　　　　　　　$(".select-box ul").addClass("none").removeClass("block");
　　　　}

    })

</script>

</body>

</html>

div自定义下拉框的更多相关文章

  1. jquery美化select，自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

  2. easyui源码翻译1.32--Combo(自定义下拉框)

    前言 扩展自$.fn.validatebox.defaults.使用$.fn.combo.defaults重写默认值对象.下载该插件翻译源码 自定义下拉框显示一个可编辑的文本框和下拉面板在html页面 ...

  3. Combo( 自定义下拉框) 组件

    本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一． 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...

  4. 第二百一十二节，jQuery EasyUI，Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  5. jq--实现自定义下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. vue自定义下拉框组件

    创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...

  7. 关于safari上的select宽高问题小技，自定义下拉框

    之前一直用windows做开发,最近换了个mac,在几经折腾之下,安装完了各种开发工具,IDE等,然后欣然打开自己正在开发的网站.突然发现mac上所有的下拉框都变了,都是默认样式,无论padding, ...

  8. div模拟下拉框

    1.模拟下拉框.点击文本框在文本框下面显示一个层divList,点击divList以外的任何地方,关闭divList层 document.body.onclick = function (e) { e ...

  9. android中自定义下拉框（转）

    android自带的下拉框好用不?我觉得有时候好用,有时候难有,项目规定这样的效果,自带的控件实现不了,那么只有我们自己来老老实实滴写一个新的了,其实最基本的下拉框就像一些资料填写时,点击的时候出现在 ...

随机推荐

  1. 简单的Viewing Frustum Culling

    Viewing Frustum Culling是图形绘制流水线中,将不可见物体(即不在视锥体内的物体)提前剔除的操作. 在实践中,精确判断物体的可见性开销较大,因而通常用物体包围球或包围盒与视锥体(平 ...

  2. Android 自定义Dialog类，并在Activity中实现按钮监听。

      实际开发中,经常会用到Dialog,比如退出时候会弹出是否退出,或者还有一些编辑框也会用Dialog实现,效果图如下: 开发中遇到的问题无非在于如果在Activity中监听这个Dialog中实现的 ...

  3. 直接启动tomcat时为tomcat指定JDK

    第一种: 在windows环境下以批处理文件方式启动tomcat,只要运行<CATALINA_HOME>/bin/startup.bat这个文件,就可以启动Tomcat.在启动时,star ...

  4. Jenkins入门系列之——03PDF文档下载

    啥都不说了,网页看着蛋疼的,自己下载pdf文档吧. 点击下载文档 http://files.cnblogs.com/zz0412/jenkins%E5%85%A5%E9%97%A8%E6%89%8B% ...

  5. 从一个简单的ASP.NET 5站点开启.NET跨平台之旅

    在经历了阿里云上“黑色1秒”的空欢喜之后,我们“被迫”考虑实现.NET的跨平台,将Web服务器由Windows换成Linux.而这种“被迫”在一个存在已久的愿望下,变得水到渠成.这个愿望就是 —— “ ...

  6. servlet的四个作用域

    作用域规定的是变量的有效期限,servlet有四个作用域对象,这里只说三个: 一. request作用域: 1.作用范围: 就是指从http请求发起,到服务器处理结束,返回响应的整个过程.在这个过程中 ...

  7. PRINCE2

    首先要说的是,我这篇体会是针对一定的背景的,不能算是一种通用的管理方式,只能是我自己的经验总结,能给大家平常的管理提供一点思路,我就很满足了.先说说背景,我所在公司做的是大型桌面应用软件,简单点说就是 ...

  8. Thinking in java学习笔记之final

  9. gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  10. 2次使用fork避免产生僵尸进程和不去处理SIGCHLD信号

    1.如下代码所示 #include <unistd.h> #include <sys/types.h> #include <unistd.h> int main(i ...