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

所以自己用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. 解决Firefox/Opera 不支持onselectstart事件实现不允许用户select

    在IE/Safari/Chrome中我们可以使用onselectstart事件来阻止用户选定元素内文本,本文为大家解决下火狐中如何实现不能选择,由此需求的朋友可以参考下,希望对大家有所帮助       ...

  2. AppBox升级进行时 - 如何向OrderBy传递字符串参数（Entity Framework）

    AppBox 是基于 FineUI 的通用权限管理框架,包括用户管理.职称管理.部门管理.角色管理.角色权限管理等模块. Entity Framework提供的排序功能 再来回顾一下上篇文章,加载用户 ...

  3. JavaScript模板引擎artTemplate.js——template.compile()方法

    template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...

  4. Java学习笔记-多线程-创建线程的方式

    创建线程 创建线程的方式: 继承java.lang.Thread 实现java.lang.Runnable接口 所有的线程对象都是Thead及其子类的实例 每个线程完成一定的任务,其实就是一段顺序执行 ...

  5. cogs 577 蝗灾 CDQ分治

    第一道CDQ,抄了下helenkeller的代码,感觉和归并排序差不多... 因为左半边的修改肯定在右半边的询问之前,所以就不用管时间的限制了,可以直接x轴排序树状数组处理y轴... #include ...

  6. windows下MySQL 忘记初始密码

    一.windows下修改MySQL用户密码的方法:   1.关闭正在运行的MySQL服务:net stop mysql  或 在windows 任务管理器中结束 mysqld.exe 进程 或 在 管 ...

  7. 基于Arduino、STM32进行红外遥控信号接收

    catalogue . 遥控器原理简介 . 红外遥控原理 . 常见红外遥控器红外线信号传输协议 . 遙控器的发展 . 实验过程 . 攻击面 . 基于STM32实现红外信号解码 1. 遥控器原理简介 0 ...

  8. IBatisNet使用教程

     1.是数据持久层,对应.NET方向的有Ibatis.NET,只要用来处理数据库表结构和程序实体之间映射,ado.net是用来处理和数据库直接通信的,取出数据(object,int,string,da ...

  9. oracle---jdbctest--laobai

    import java.sql.CallableStatement; import java.sql.Connection; import java.sql.ResultSet; import ora ...

  10. 《Python核心编程》18.多线程编程（二）

    18.1没有线程支持 #!/usr/bin/env python # -*- coding:utf-8 -*- from time import sleep, ctime def loop0(): p ...