html,css頁面中的幾種勾選的效果製作

頁面中的勾選框還是比較常見的啊，一般都是請勾選 同意什麼協議什麼 七天登錄什麼的
但是我們要自己製作一個呢 先看下下面的幾種效果

上面用了四個方法 做出來的勾選情況 接下來進行一一講解
1.最常見的 使我們 form表單中 checkbox 也是最簡單

直接一個 input type="checkbox" 就出來了
<input type="checkbox" name="" id="">

但是吧 我們就單單做一個勾選的動作 用這個pc端還可以 但是 移動端就有點問題了
畢竟各個廠家可能對這個默認樣式設計的也不太一樣
一般是不建議的哈 而且這個表單元素 最好還是在表單form裏面使用

2.通過圖片的形式進行 製作 圖片不存在什麼兼容性的問題 通過控制元素背景圖片的切換 來達到那種勾選效果 其實很多種情況 兼容性不好做的話 都可以採用圖片來解決問題

.check3{
	width: 40px;
       height: 40px;
       position: relative;
       margin: 50px 0;
       border-radius: 5px;
       cursor: pointer;
       transition: background-color 0.25s;
       background: url('./uncheck.png') no-repeat;
       background-size: 100% 100%;
}
.check3_active{
	background: url('./check.png') no-repeat;
       background-size: 100% 100%;
}
<div class="check3"></div>

3.和4 有限類似 都是通過僞類生成器來製作的 但是 有一點區別

3中的對勾 是通過css畫出來的
簡單說一些 就是在外層div中 通過僞類生成器生成一個塊級元素 ，然後使他們的 寬高不同然是旋轉一下 好像是一個對勾的情況 然後 這樣就可以了
border: 3px solid #fff;
border-width: 0 0 3px 3px;

<div class="check1"></div>

.check1{
	        width: 40px;
	        height: 40px;
	        position: relative;
	        margin: 50px 0;
	        border: 1px solid #ddd;
	        border-radius: 5px;
	        cursor: pointer;
	        transition: background-color 0.25s;
	    }
	    .check1_active{
	        background: palevioletred;
	        border-color: palevioletred;
	    }
    	.check1_active:after{
	        content: '';
	        display: block;
	        width: 14px;
	        height: 10px;
	        border: 3px solid #fff;
	        border-width: 0 0 3px 3px;
	        position: absolute;
	        top: 50%;
	        left: 50%;
	        margin-top: -8px;
	        margin-left: -8px;
	        transform: rotate(-45deg);
	    }

4.雖然也是僞類生成器 但是採用的是 uincode 字符編碼 製作的 相對來說 我還是比較喜歡最後一種 哈哈
"\2610” 編碼 表示 沒有對勾情況下的
"\2611” 表示有對勾的情況下

.check2:before{
	content: "\2610";  
	color: #666;
	position: absolute;
	display: block;
	top: 35px;
	left:10px;
	font-size: 50px;
}
.check2_active:before{
	content: "\2611";
	color: #f00;
	position: absolute;
	display: block;
	top: 35px;
	left:10px;
	font-size: 50px;
}
<div class="check2"></div>

上述總結的話 ，其實吧 除了 checkbox外 其他的都是相當於 是一個有一個類名在 有和無之間的切換
然後 我們通過js動態控制一下 就實現了 勾選的動態效果了

<script>
		$('.check1').click(function(){
			$(this).toggleClass('check1_active');
		})
		$('.check2').click(function(){
			$(this).toggleClass('check2_active');
		})
		$('.check3').click(function(){
			$(this).toggleClass('check3_active');
		})
	</script>

最後我們再復現一次效果 加上過度而效果 看起來 效果會更好點 不是嗎