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

所以自己用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. 基于SoCkit的opencl实验1-基础例程

    基于SoCkit的opencl实验1-基础例程 准备软硬件 Arrow SoCkit Board 4GB or larger microSD Card Quartus II v14.1 SoCEDS ...

  2. python实现计算器

    计算器功能 实现优先级解析,加减乘除四则运算 自定义小数位精度 实现思想: 先找到最里层括号,根据乘除,加减优先级,调用写好的乘除.加减运算函数算出括号内总值,再将原括号式用所得值替换,此过程循环进行 ...

  3. jeecg表单页面控件权限设置（请先看官方教程，如果能看懂就不用看这里了）

    只是把看了官方教程后,觉得不清楚地方补充说明一下: 1. 2. 3. 4.用"jeecgDemoController.do?addorupdate"这个路径测试,不出意外现在应该可 ...

  4. shell浅谈之十函数

    转自:http://blog.csdn.net/taiyang1987912/article/details/39583179 一.简介 Linux Shell编 程中也会使用到函数,函数可以把大的命 ...

  5. 解决：MIUI 8应用商店下载不了软件 APP

    MIUI 8应用商店下载不了软件,是什么原因呢? 原因是:刷了国际版的MIUI,然后又刷回国内的MIUI,刷机时数据没有清理干净. 解决办法:使用RE管理器或者其他第三方可以编辑系统文件的文件管理器, ...

  6. AOJ DSL_2_A Range Minimum Query (RMQ)

    Range Minimum Query (RMQ) Write a program which manipulates a sequence A = {a0,a1,...,an−1} with the ...

  7. [Think In Java]基础拾遗2 - 多态、反射、异常、字符串

    目录 第八章 多态第十四章 类型信息第十二章 通过异常处理错误第十三章 字符串 第八章 多态 1. 前期绑定 & 后期绑定 绑定是指将方法调用同一个方法主体关联起来的这么一个过程.如果在程序执 ...

  8. icon图标

     http://images2015.cnblogs.com/blog/575577/201609/575577-20160901194344636-1596119396.png  http://im ...

  9. bzoj 2301: [HAOI2011]Problem b

    2301: [HAOI2011]Problem b Time Limit: 50 Sec Memory Limit: 256 MB Submit: 3757 Solved: 1671 [Submit] ...

  10. kail linux安装软件提示“无法定位软件包”解决方法

    主要是更新源的问题,我安装ibus-pinyin老是提示"无法定位软件包" 最后我用的是163的源: # 源 deb http://mirrors.163.com/debian w ...