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

所以自己用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. mysql索引 （校验规则引发的血案）

    EXPLAIN SELECT a.* FROM gc_fin_rate_info  a LEFT JOIN rbac_user b ON a.owner =b.id; 处理之前的情况. 虽然走了索引, ...

  2. knockoutJS学习笔记04：监控属性

    一.语法介绍 先来看一个简单的例子: <span data-bind="text:name"></span> var obj = {name:ko.obse ...

  3. 生成 PDF 全攻略【2】在已有PDF上添加内容

    项目在变,需求在变,不变的永远是敲击键盘的程序员..... PDF 生成后,有时候需要在PDF上面添加一些其他的内容,比如文字,图片.... 经历几次失败的尝试,终于获取到了正确的代码书写方式. 在此 ...

  4. Ubuntu 14.04.1 建立 Android M, Android N 開發環境 與 問題

    # Modify /etc/apt/sources.list# add below 3 lines to /etc/apt/sources.listdeb http://archive.ubuntu. ...

  5. VS2010 MFC对Excel的操作

    这是帮别人做项目遇到的一个问题,的那个是纠结了老长时间,本以为是一件很轻松的事... 首先,这里采用了OLE来对Excel进行操作,网上其实有大把的例子,虽然都可以运行,但是并不能满足项目要求,其实我 ...

  6. android开发之背景音乐与音效

    android开发之背景音乐与音效 一:添加背景音乐(MediaPlayer) MediaPlayer class can be used to control playback of audio/v ...

  7. MyEclipse建立SpringMVC入门HelloWorld项目

    一.首先,建立空的web project项目: 1. 2. 3. 二.其次,导入先关jar包 1.将jar包导入SpringMVCHelloWorld\WebRoot\WEB-INF\lib目录下 三 ...

  8. Map工具系列-04-SQL合并执行工具

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  9. COGS729. [网络流24题] 圆桌聚餐

    «问题描述:假设有来自m 个不同单位的代表参加一次国际会议.每个单位的代表数分别为ri(i=1,2,3...m), .会议餐厅共有n张餐桌,每张餐桌可容纳c i(i=1,2...n) 个代表就餐.为了 ...

  10. SaaS模式的软件

     SaaS是Software-as-a-Service(软件即服务)的简称,随着互联网技术的发展和应用软件的成熟, 在21世纪开始兴起的一种完全创新的软件应用模式.它与"on-demand  ...