类似 select 选择框效果及美化
网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果。所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下:
对于上图的箭头效果,可以看看我上篇博客 点击这里
点击一个 test ,就会把列表显示出来,再次点击,列表隐藏,选择一个 li ,就会把 span 里的内容替换成 li 的内容,然后可以用 js 监控 span 的变化,然后执行你的代码。效果如下:
html 代码如下:
<div id="type" class="test">
<span>投资种类</span>
<ul class="dropdown">
<li>期货</li>
<li>股票</li>
<li>期权</li>
</ul>
</div>
<div id="kind" class="test">
<span>投资类型</span>
<ul class="dropdown">
<li>趋势</li>
<li>震荡</li>
<li>套利</li>
<li>选股</li>
<li>择时</li>
</ul>
</div>
css 代码如下:
ul li{
list-style: none;
}
.test {
position: relative;
float: left;
width: 120px;
height: 40px;
padding-left: 11px;
font-size: 15px;
line-height: 40px;
cursor: pointer;
border: 1px solid #d2d2d2;
border-radius: 3px;
margin-right: 20px;
outline: none;
}
.test:before {
position: absolute;
right: 13px;
top: 18px;
width:;
height:;
content: "";
border-width: 8px 8px 0 8px;
border-style: solid;
border-color: #d36969 transparent;
-webkit-transition: transform .25s;
-moz-transition: transform .25s;
-ms-transition: transform .25s;
-o-transition: transform .25s;
transition: transform .25s;
}
.test:after {
position: absolute;
right: 15px;
top: 18px;
width:;
height:;
content: "";
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #fff transparent;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-ms-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
}
.test.active:before{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.test.active:after{
top: 20px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.test .dropdown {
position: absolute;
right:;
left:;
display: none;
padding:;
border-radius: inherit;
border: 1px solid #d2d2d2;
box-shadow: 2px 2px 5px rgba(0,0,0,.4);
}
.test.active .dropdown {
display: block;
}
.test .dropdown:before {
position: absolute;
right: 13px;
bottom: 100%;
width:;
height:;
content: "";
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: #d2d2d2 transparent;
}
.test .dropdown:after {
position: absolute;
right: 15px;
bottom: 100%;
width:;
height:;
content: "";
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.test .dropdown li {
float: left;
width: 129px;
font-size: 14px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
text-align: center;
}
.test .dropdown li:first-of-type {
border-radius: 3px 3px 0 0;
}
.test .dropdown li:last-of-type {
border-radius: 0 0 3px 3px;
}
.test .dropdown li:hover {
color: #fff;
background: #c43c3d;
}
对于 :before 和 :after 两个伪元素不理解可以去看看我上篇博客 点击这里
js 代码如下:
function DropDown(el) {
this.dd = el;
this.span = this.dd.children('span');
this.li = this.dd.find('ul.dropdown li');
this.val = '';
}
DropDown.prototype.initEvents = function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active').siblings().removeClass('active');
event.stopPropagation();
});
obj.li.on('click', function() {
var opt = $(this);
obj.val = opt.html();
if (obj.span.html() == obj.val) return;
obj.span.html(obj.val);
$(document).click(function() {
$('.test').removeClass('active');
});
})
}
var test1 = new DropDown($('#type'));
var test2 = new DropDown($('#kind'));
test1.initEvents();
test2.initEvents()
这里使用构造-原型组合模式来创建了一个 DropDown 对象,构造-原型组合模式解释:属性写在构造函数中,是表示每个实例独有的属性,让对象具体化;方法写在构造函数外,是为了表示每个实例共享的方法。
但是这里有点不好的方法是,已限制了 html 的布局,如果有什么疑问,本人会在评论中一一答复。
类似 select 选择框效果及美化的更多相关文章
- Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决
Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...
- Chosen:Select 选择框的华丽变身
HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...
- Notes: select选择框
HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...
- select选择框在谷歌火狐和IE样式的不同
select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...
- AngularJS初始化Select选择框
一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...
- select选择框实现跳转
select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
- iiview Select 选择框打勾选中的内容label和展示的不一致
Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少 :label-in-value="true";官方文档 ...
- AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...
- 修改页面中显示出需要修改的数据(包括select选择框复显示)
页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...
随机推荐
- BAT批处理(一)
本文摘自博文<BAT批处理文件教程> 这是一篇技术教程,我会用很简单的文字表达清楚自己的意思,只要你识字就能看懂,就能学到知识.写这篇教程的目的,是让每一个看过这些文字的朋友记住一句话:如 ...
- 迷宫bfs POJ3984
#include<stdio.h> int map[5][5]={0,1,0,0,0, 0,1,0,1,0, 0,0,0,0,0, 0,1,1,1,0, ...
- 【转】android中最好的瀑布流控件PinterestLikeAdapterView
[源地址]http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0919/1696.html 之前我们介绍过一个开源的瀑布流控件Stag ...
- centos6.5 扩容
#查看挂载点: df -h #显示: 文件系统 容量 已用 可用 已用%% 挂载点 /dev/mapper/vg_dc01-lv_root 47G 12G 34G % / tmpfs 504M 88K ...
- lisp分支
newLISP http://www.ituring.com.cn/article/110968 clojure http://clojure.org/ ...
- zabbix-agent passive
http://www.cnblogs.com/mysql-dba/p/5010902.html http://blog.chinaunix.net/uid-29155617-id-4668602.ht ...
- Redis学习笔记(5)-Set
package cn.com; import java.util.HashMap; import java.util.Map; import java.util.Set; import redis.c ...
- jdk1.7的collections.sort(List list)排序问题
1.7使用旧排序: System.setProperty("java.util.Arrays.useLegacyMergeSort", "true"); 1.7 ...
- angularJS的$watch和$apply
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- node中定时器的“先进”用法
var DSQ = setInterval(function(){ console.log('zzq'); },1000); setTimeout(function(){ clearInterval( ...