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

所以自己用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. 未封装的js放大镜特效

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

  2. Django-跨站请求

    //用户验证Tonken 在Html 中 设置一个Token {% csrf_token %} //在代码Views.py 中返回值添加 context_instance=RequestContext ...

  3. Ubuntu 14.10安装手记

    1. Ubuntu系统安装 按照 www.linuxidc.com/Linux/2014-04/100369.htm 的安装方法即可. 配置文件有两个需要注意的地方.一.搞清楚电脑的分区表,c盘是hd ...

  4. 如何用java自带的工具生成证书

    一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...

  5. 【转】精选30个优秀的CSS技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  6. 11月7日下午PHP----PDO访问方式操作数据库

    MySQLI是专门访问MySQL数据库的,不能访问其它数据库.PDO可以访问多种的数据库,它把操作类合并在一起,做成一个数据访问抽象层,这个抽象层就是PDO,根据类操作对应的数据库.mysqli是一个 ...

  7. 10月28日PHP基础知识测试题

    本试题共40道选择题,10道判断题,考试时间1个半小时 一:选择题(单项选择,每题2分): 1． LAMP具体结构不包含下面哪种(A) A:Windows系统 B:Apache服务器 C:MySQL数 ...

  8. C# 的tcp Socket设置自定义超时时间

    简单的c# TCP通讯(TcpListener) C# 的TCP Socket (同步方式) C# 的TCP Socket (异步方式) C# 的tcp Socket设置自定义超时时间 C# TCP ...

  9. linux下apache各种跳转（包括伪静态）的配置

      1.404跳转: vi /etc/httpd/conf/httpd.conf 在虚拟主机配置里添加一行:ErrorDocument 404 /404.html 2.301跳转: 1)将不带www的 ...

  10. curl命令使用

    curl命令可以用来构造http请求.参数有很多,常用的参数如下: 通用语法:curl [option] [URL...]在处理URL时其支持类型于SHELL的名称扩展功能,如http://www.j ...