純CSS實現checkbox

純css實現的checkbox，效果見我的codepen。

關鍵在於把原生的input隱藏，用和他相關的label來探測單擊事件。

再就是checkbox裡的對勾的實現，用右邊和下邊的邊框組合，然後旋轉而成。

好吧，來看源碼吧。

<div class="container">    <div class="checkboxouter">        <input type="checkbox">        <label class="checkbox"></label>             </div></div>

CSS是關鍵，用了SASS和Prefix free。

/*SASS變數定義*/ $border-styles: 2px solid lightgrey; $tick-color: #27ae60; $box-color: #fff; /*實現頁面背景、置中對齊，非本案例關鍵代碼*/ body {    background-color: $bgcolor;}.container {    position: absolute;    top: 50%;    left: 50%;    height: 40px;    width: 40px;    text-align: center;    transform: translate(-50%, -50%);}/*實現複選框外邊框*/ .checkboxouter {    height: 40px;    width: 40px;    border-radius: 3px;    background-color:$box-color;    display: block;    border:$border-styles;    transition: all .5s;}.checkboxouter:hover {    transform: scale(1.5);}/*原聲的checkbox隱藏*/ input[type="checkbox"] {    opacity: 0;    background : red;    position: absolute;    cursor: pointer;    z-index: 1;    height: 100%;    width: 100%;    left: 0;    top: 0;}/*就是這個東東實現複選框裡的對勾*/ .checkbox {    position: absolute;    border-bottom: 3px solid lightgrey;    border-right: 3px solid lightgrey;    background-color: transparent;    height: 20px;    width: 10px;    transform: rotate(45deg);    transform-origin: -35% 30%;    transition: all 0.2s;}/*label來啟用單擊事件*/ input[type="checkbox"]:checked ~.checkbox {    transition: all 0.3s;    border-bottom:3px solid $tick-color;    border-right:3px solid $tick-color;}

給大家推薦個關於CSS的單擊事件處理教程，5m3d的採用 CSS 處理點擊事。

好吧，今天的這篇有點簡單，大家海涵。，請大家到我的codepen線上編輯、下載效果。

---------------------------------------------------------------
前端開發whqet，關注web前端開發技術，分享網頁相關資源。
---------------------------------------------------------------