碼上歡樂
相關內容    簡體    繁體

深入理解 CSS 的 :before 和 :after 選擇器（制作select下拉列表美化插件）

本文轉載自   查看原文   2016-08-12 22:01   5209 

原文鏈接：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>

　　


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS3選擇器 ::before和::after 深入理解CSS選擇器優先級 CSS中before、after偽類選擇器的巧用 使用before和after屬性選擇器 深入理解CSS選擇器優先級的計算 使用 CSS 的 :before 和 :after 選擇器做一個箭頭樣式 CSS3偽元素選擇器 ::before ::after | 記錄自己的前端學習日子 CSS之旅——第二站 如何更深入的理解各種選擇器 使用js制作 下拉選擇日期列表 (即日期選擇器) 純css修改下拉列表select的默認樣式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM