效果
最終的樣式，想要的效果:
我們要創建方框中的對勾，對於這一點，我們可以使用:after偽類創建一個新的元素，為了實現這個樣式，我們可以創建一個5px * 15px的長方形並給他加上邊框。這時候我們去掉上面和右邊的邊框之后，它會看起來像一個字母L。然后我們可以使用CSS的transform屬性讓它旋轉一下，這樣看起來就像是一個對勾。
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選中標簽forcheck</title> </head> <body> <div class="div-checked"> <label> <input type="checkbox" value="cbEticket"> <i>電子票</i><span></span> </label> <label> <input type="checkbox" checked="" value="cbMeetingRemind"> <i>會議提醒</i><span></span> </label> </div> </body> </html>
.div-checked label {
cursor: pointer;
position: relative;
display: inline-block;
width: 150px;
height: 38px;
border: 1px solid grey;
}
/**
* 按鈕透明
* @type {String}
*/
input[type="checkbox"] {
opacity: 0;
}
/**
* checkbox選中樣式
* @type {String}
*/
input[type="checkbox"]:checked+i {
border-color: blue;
color: blue;
}
/**
* i標簽的大小
*/
i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
}
/**
* 對勾√效果，使用border
* @type {[type]}
*/
span:after {
opacity: 1;
content: '';
position: absolute;
width: 5px;
height: 15px;
background: transparent;
top: 10px;
right: 5px;
border: 2px solid #fff;
border-top: none;
border-left: none;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
}
/**
* 選中狀態，span(三角形)樣式
* @type {String}
*/
input[type="checkbox"]:checked+i+span {
width: 0px;
height: 0px;
border-color: blue transparent;
border-width: 0px 0px 30px 30px;
border-style: solid;
position: absolute;
right: -1px;
top: 10px;
opacity: 1;
}