<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="chufang/flex.less"/>
<link rel="stylesheet" type="text/css" href="iconfont.css"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{font-size: 14px;}
ul{
list-style: none;
}
.select-wrapper{
position: relative;
z-index: 1;
margin:20px;
}
.input-wrapper{
position: relative;
}
.input-container{
width:380px;
height: 40px;
margin-bottom: 10px;
box-sizing: border-box;
}
.item-input-style{
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
}
.item-input-style:hover{border-color: #c0c4cc;}
.item-input-style:focus{
border-color: #409eff;
}
.input-wrapper .item-input{
padding-right: 30px;
cursor: pointer;
}
.input-wrapper span{
position: absolute;
top: 0;
right: 5px;
cursor: pointer;
width: 25px;
line-height: 40px;
text-align: center;
color: #c0c4cc;
transition: all .3s;
}
.option-wrapper{
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 2019;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
box-sizing: border-box;
margin: 5px 0;
}
.ul-wrapper{
padding: 6px 0;
box-sizing: border-box;
}
.ul-wrapper li:hover{
background-color: #f5f7fa;
}
.ul-wrapper li{
padding: 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #606266;
height: 34px;
line-height: 34px;
box-sizing: border-box;
cursor: pointer;
}
.ul-wrapper .item-li-active{
color: #409eff;
font-weight: 700;
}
/*复选框*/
.checkout-container{
width:380px;
min-height: 40px;
margin-bottom: 10px;
color: #606266;
box-sizing: border-box;
cursor: pointer;
}
.item-label{
box-sizing: border-box;
width: 80px;
height: 40px;
line-height: 40px;
padding-right: 12px;
text-align: right;
vertical-align: middle;
color: #606266;
}
.checkbox-container{
width: 150px;
line-height: 40px;
box-sizing: border-box;
}
.checkbox-color{color: #409eff;}
</style>
</head>
<body>
<div class="select-wrapper">
<div class="input-wrapper input-container">
<input class="item-input item-input-style" type="text" readonly="readonly" placeholder="请选择月份"/>
<span class="iconfont icon-iconset0417 aside-icon"></span>
</div>
<div class="option-wrapper">
<ul class="ul-wrapper">
<li>一月</li>
<li>二月</li>
<li>三月</li>
<li>四月</li>
</ul>
</div>
<div class="input-container">
<input class="item-input-style" type="text" placeholder="请输入信息"/>
</div>
<div class="checkout-container flex">
<label class="item-label growShrink">活动性质</label>
<div class="checkbox-wrapper all flex wrap">
<div class="checkbox-container">
<span class="span-icon iconfont icon-gouxuan-weixuanzhong-xianxingfangkuang"></span>
<span class="span-text">美食/餐厅线上活动</span>
</div>
<div class="checkbox-container">
<span class="span-icon iconfont icon-gouxuan-weixuanzhong-xianxingfangkuang"></span>
<span>地推活动</span>
</div>
<div class="checkbox-container">
<span class="span-icon iconfont icon-gouxuan-weixuanzhong-xianxingfangkuang"></span>
<span>线下主题活动</span>
</div>
<div class="checkbox-container">
<span class="span-icon iconfont icon-gouxuan-weixuanzhong-xianxingfangkuang"></span>
<span>单纯品牌曝光</span>
</div>
</div>
</div>
</div>
<script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var inputWidth=$(".input-wrapper").width()-2;
$(".option-wrapper").width(inputWidth);
var optionwrapper=$(".option-wrapper");
var aside=$(".aside-icon");
$(".input-wrapper").click(function(e){
var _this=$(this);
if(optionwrapper.css('display')=='none'){
optionwrapper.show();
aside.removeClass('icon-iconset0417').addClass('icon-iconset0418');
}else{
optionwrapper.hide();
aside.removeClass('icon-iconset0418').addClass('icon-iconset0417');
}
var inputVal=_this.find('input').val();
if(inputVal!="")
$(".option-wrapper li:contains(" +inputVal + ")").addClass('item-li-active').siblings().removeClass('item-li-active');
e.stopPropagation()
})
$(".option-wrapper").on('click','li',function(){
var _this=$(this);
var liText=_this.html();
$(".item-input").val(liText);
optionwrapper.hide();
aside.removeClass('icon-iconset0418').addClass('icon-iconset0417');
})
$(document).on({
"click": function(e){//除了.input-wrapper 之外点击任何地方都会隐藏optionwrapper
var src = e.target;
if(src.class && src.class ==="input-wrapper"){
return false;
}else{
optionwrapper.hide();
aside.removeClass('icon-iconset0418').addClass('icon-iconset0417');
}
}
});
//复选框
$(".checkbox-container").click(function(){
var _this=$(this);
var spanIcon=_this.find(".span-icon");
if(spanIcon.hasClass('icon-gouxuan-weixuanzhong-xianxingfangkuang')){
_this.addClass('checkbox-color');
spanIcon.removeClass('icon-gouxuan-weixuanzhong-xianxingfangkuang').addClass('icon-gouxuan-xuanzhong-fangkuang');
}else{
_this.removeClass('checkbox-color');
spanIcon.addClass('icon-gouxuan-weixuanzhong-xianxingfangkuang').removeClass('icon-gouxuan-xuanzhong-fangkuang');
}
})
})
</script>
</body>
</html>

效果：

模拟select下拉框、复选框效果的更多相关文章

  1. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

  2. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  3. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  4. 联合县城市，采用ajax，而使用ul模拟select下拉

    接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){                          ...

  5. ops-web运维平台-create.jsp-mootools下拉框-复选框

    create.jsp页面的,body部分 <body onload="Page.init('${pageError}','${pageMessage}',${isSubmit},tru ...

  6. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

  7. jquery单选框 复选框表格高亮 选中

    单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...

  8. 纯css3单选框/复选框美化样式代码

    纯CSS 单/复选框 美化请选择iPhone 型号 iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus   选择兴趣爱好 女 绘画 摄影 骑行   原理在这 ...

  9. 单选框 复选框 隐藏之后，绑定的change事件在ie中失效的问题

    有时候需要对单选框和复选框进行美化,就需要在<input type="radio">和<input type="checkbox">元素 ...

随机推荐

  1. SPOJ 913 Query on a tree II

    spoj题面 Time limit 433 ms //spoj的时限都那么奇怪 Memory limit 1572864 kB //1.5个G,疯了 Code length Limit 15000 B ...

  2. （79）【按键】[独立按键] - 1： 单击，双击，三击以及N击

    此按键程序的实现的功能是单个独立按键的[单击],[长按],[双击],[三击]以及[多击].本文分为三个部分, 第一个部分是说[单击],[长按]的程序: 第二部分是讲[双击]: 第三部分是讲[三击],[ ...

  3. 买SD卡和TF卡要买U3和A2协议的

    A3 最低平稳写入30M/s

  4. C++二维数组（指针）做参数

    一.问题描述 使用C++编程过程中经常需要使用到二维数组,然而初级程序员在使用过程中经常会出错使程序崩溃.下面就二维指针的定义,初始化,以及二维指针做参数给出简单介绍. 1.二维数组的定义与初始化 在 ...

  5. 【错误记录】windows python 路径中的一个转义错误：'rawunicodeescape' codec can't decode bytes in position 112-113: truncated \uXXXX

    ur"D:\work\结构化\CSV\useful\内容.csv" 报错 编码错误原因,当路径中有\u这种字串时,即使是包含在r"" 中也会进行转义,然后转义出 ...

  6. [BZOJ3033]:太鼓达人（爆搜）

    题目传送门 题目描述 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员XLk.Poet_shy和lyd ...

  7. ali之mtl平台学习

    摩天轮平台可以进行无线测试.设备借用.打包发布.线上监控等功能. 无线测试包括:mock测试.真机适配.代码审查.验收报告等. mock测试类似于fiddler,主要用于接口查看,可以查看请求,返回串 ...

  8. CDH安装时，部分节点不受管控

    解决方案: /opt/cm-5.12.0/etc/init.d/cloudera-scm-agent stop cd /opt/cm-5.12.0/lib/cloudera-scm-agent/ rm ...

  9. 大数据笔记（三十二）——SparkStreaming集成Kafka与Flume

    三.集成:数据源 1.Apache Kafka:一种高吞吐量的分布式发布订阅消息系统 (1) (*)消息的类型 Topic:主题(相当于:广播) Queue:队列(相当于:点对点) (*)常见的消息系 ...

  10. Canvas 实现钟表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...