深入理解 CSS 的 :before 和 :after 选择器（制作select下拉列表美化插件）
原文链接：http://www.cnblogs.com/LY-leo/p/5765598.html
对于 :before 和 :after 选择器，大家并不陌生，但是很少有人会主动去用它们。先解释下它们的定义和用法：
:before 选择器在被选元素的内容前面插入内容，:after 选择器在被选元素的内容后面插入内容，都会使用 content 属性来指定要插入的内容。
有时候，项目中或多或少需要一些箭头，如果用图片来做，感觉就有点 low 了，而上面这两个选择器是最好的选择。效果如下：
html 代码如下：
<div class="test"></div>
css 代码如下：
.test {
position: relative;
width: 120px;
height: 40px;
border: 1px solid #d2d2d2;
border-radius: 3px;
}
.test:after {
position: absolute;
right: 15px;
top: 18px;
width: 0;
height: 0;
content: "";
border-width: 6px 6px 0 6px; /*border-width: 6px 6px 6px 6px;*/
border-style: solid;
border-color: #fff transparent; /*red transparent transparent transparent;*/
-webkit-transition: all .25s;
-moz-transition: all .25s;
-ms-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
}
.test:before {
position: absolute;
right: 13px;
top: 18px;
width: 0;
height: 0;
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.active:after{
top: 20px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.test.active:before{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
通过 :before 和 :after 两个伪元素，设置 content 为空，宽高为零，边框和颜色，生成两个等边三角形，一个是红色的三角，其边长稍大，一个是白色的三角。会有人问为什么白色三角是通过 :after 生成的，因为 :after 生成的白色三角才能覆盖在 :before 生成的红色三角，而形成一个箭头(一定要设置好定位的 top 值，使两个三角的底边重合)。
js 代码如下：
$('.test').on('click',function(){
$(this).toggleClass('active');
})
点击的时候箭头会旋转180度，效果如下：
分析：
加z-index: 10前后：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.test {
position: relative;
width: 120px;
height: 40px;
border: 1px solid red;
border-radius: 3px;
} .test:after {
position: absolute;
right: 15px;
top: 18px;
width: 0;
height: 0;
content: "";
border-width: 6px 6px 6px 6px;
border-style: solid;
border-color: red transparent transparent transparent;
transition: all .25s;
} .test:before {
position: absolute;
right: 13px;
top: 18px;
width: 0;
height: 0;
content: "";
border-width: 8px 8px 8px 8px;
border-style: solid;
border-color: green transparent;
transition: transform .25s;
/*z-index: 10;*/
}
</style>
</head> <body>
<div class="test">aaaaaa</div>
</body> </html>
修改1：
.test:before {
position: absolute;
right: 13px;
top: 18px;
width: 0;
height: 0;
content: "";
border-width: 8px 8px 8px 8px;
border-style: solid;
border-color: green transparent transparent transparent;
transition: transform .25s;
/*z-index: 10;*/
}
修改后的样式：
.test:after {
position: absolute;
right: 15px;
top: 18px;
width: 0;
height: 0;
content: "";
border-width: 6px 6px 6px 6px;
border-style: solid;
border-color: white transparent transparent transparent;
transition: all .25s;
}
.test:before {
position: absolute;
right: 13px;
top: 18px;
width: 0;
height: 0;
content: "";
border-width: 8px 8px 8px 8px;
border-style: solid;
border-color: green transparent transparent transparent;
transition: transform .25s;
/*z-index: 10;*/
}
制作美化select 插件：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/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 red;
border-radius: 3px;
margin: 0px 20px;
outline: none;
} .test:before {
position: absolute;
right: 13px;
top: 18px;
width: 0;
height: 0;
content: "";
border-width: 8px 8px 0 8px;
border-style: solid;
border-color: red 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: 0;
height: 0;
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: 0;
left: 0;
display: none;
padding: 0;
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: 0;
height: 0;
content: "";
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: #d2d2d2 transparent;
} .test .dropdown:after {
position: absolute;
right: 15px;
bottom: 100%;
width: 0;
height: 0;
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: red;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ 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();
})
</script>
</head> <body>
<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>
</body> </html>
深入理解 CSS 的 :before 和 :after 选择器（制作select下拉列表美化插件）的更多相关文章
- 理解CSS中的三种选择器>+~
1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F 相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...
- 理解CSS
写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...
- CSS学习摘要-语法和选择器
主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...
- css 03-CSS样式表和选择器
03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]
深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...
- CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
随机推荐
- 如何使用本地yum源？
首先为大家介绍在Centos系统上如何利用系统光盘/镜像作为yum源,实现程序包的安装等操作 1.首先在VM虚拟机上确保已载入光盘镜像,载入成功后显示如下效果. 2.挂载光盘镜像文件,使用命令: mo ...
- $使用dom4j可解析 返回&#x等字样的 html转义字符
如果以GET或POST请求某个系统返回,带有 $#x 那很有可能是axis服务器返回的. <?xml version="1.0" encoding="UTF-8&q ...
- JDBC学习
JDBC全称 Java DataBase Connectivity(java数据库连接)可以为多种数据库提供统一的访问: 步骤:1:加载驱动程序: 加载Mysql驱动:Class.forName(&q ...
- java代码性能优化总结(转载)
原文链接:http://developer.51cto.com/art/201511/496263.htm 前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改 ...
- Deep Learning(1)-Introduction学习总结
学习DL搁置很久了,终于下定决心开始咯~~ Deep Learning(Ian Goodfellow&&Yoshua Bengio&&Aaron Courville)- ...
- Linux 下安装 jdk压缩包
按 esc 退出 记得 输入 :q 记得 : Linux下安装jdk 把压缩文件放在 桌面的soft 下 在usr目录下新建文件夹Java,把文件复制到 usr/java 更改下路径! 3 ...
- VB6.0 读取CSV文件
最近做了一个Upload文件的需求,文件的格式为CSV,读取文件的方法整理了一下,如下: 1.先写了一个读取CSV文件的Function: '读取CSV文件 '假设传入的参数strFile=C:\Do ...
- FreeBSD_11-系统管理——{Part_4 - 内核参数定制}
特别提醒:自行定制的内核,必須经过全方位测试无誤后,方能用于生产环境 基于:/usr/src/sys/amd64/conf/GENERIC cpu HAMMER ident TEST_kernel # ...
- SILVERLIGHT 多维表头、复杂表头 MULTIPLE HEADER
先上图, 众所周知,利用silverlight datagrid展示数据相当方便,但是想要弄出一个漂亮的表头却要费尽周折.此文的目的就是简要介绍一下利用第三方控件 C1.Silverlight.Fle ...
- MapReduce几个简单的例子
文件合并和去重: 可以把每一行文本作为key,value为随意值. 数字排序: MapReduce过程中就有排序,它是按照key值进行排序的,如果key为封装int的IntWritable类型,那么M ...