HTML
<div class="wrapper">
<label class="checker">
<input type="checkbox" name="something" value="true">
<span class="check"></span>
<span class="text">未チェック</span>
</label>
</div>
CSS
/*-------------------------------------------------
チェックボックス
----------------------------------------------- */
/* チェックボックス周辺の見た目調整 */
.checker .check { display: inline-block; vertical-align: middle; }
.checker .text { display: inline-block; vertical-align: middle; max-width 80px; }
.checker input {
display: none;
}
.checker .check {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
}
.checker .check::before {
display: block;
position: absolute;
top: 2px;
left: 0;
width: 18px;
height: 18px;
border: 2px solid #ccc;
content: "";
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
}
.checker input:checked + .check::after {
display: block;
position: absolute;
top: 5px;
left: 3px;
width: 16px;
height: 8px;
border-left: 3px solid #090;
border-bottom: 3px solid #090;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
content: "";
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.checker input:disabled + .check:before {
background-color: #eee;
}
.checker input:checked:disabled + .check::after {
border-left: 3px solid #aaa;
border-bottom: 3px solid #aaa;
}