01. HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KH Material</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/content.css">
</head>
<body>
<!-- wrap-->
<div class="wrap">
<!-- title_wrap -->
<div class="tit_wrap">
<h1>Pure HTML CSS Customize Check Box.</h1>
</div>
<!-- //title_wrap-->
<!-- container -->
<div class="container">
<label class="kh_checkbox">
<input type="checkbox">
<span>Checkbox</span>
</label>
<label class="kh_checkbox">
<input type="checkbox" disabled>
<span>Disabled</span>
</label>
<label class="kh_checkbox fill_in">
<input type="checkbox">
<span>Checkbox Fill in</span>
</label>
<label class="kh_checkbox fill">
<input type="checkbox">
<span>Checkbox Fill</span>
</label>
</div>
<!-- container -->
</div>
<!-- //wrap-->
</body>
</html>
02. CSS Code
.kh_checkbox{position:relative;display:block;height:40px;padding:0 0 0 25px;overflow:hidden;}
.kh_checkbox > input[type="checkbox"]{display:none;}
.kh_checkbox > input[type="checkbox"] + span{display:block;padding: 0 0 0 10px;font-size:18px;line-height:40px;}
.kh_checkbox > input[type="checkbox"] + span::before{content:"";position:absolute;top:9px;left:0;width:20px;height:20px;border:2px solid #00833e; border-radius:4px;-webkit-transition:0.2s ease-out;transition:0.2s ease-out;}
.kh_checkbox > input[type="checkbox"]:checked + span::after{content:"";position:absolute;top:0px;left:-5px;width:20px;height:20px;border:2px solid #00833e;border-top-color:transparent;border-left-color:transparent;transform: rotate(45deg);-webkit-transition:0.2s ease-out;transition:0.2s ease-out;}
.kh_checkbox > input[type="checkbox"]:disabled + span::before{background-color:#00833e;opacity:0.7;}
.kh_checkbox.fill_in > input[type="checkbox"]:checked + span::before{background-color:#00833e;}
.kh_checkbox.fill_in > input[type="checkbox"]:checked + span::after{top:11px;left:8px;height:14px;width:6px;border:2px solid #fff;border-top:0;border-left:0;}
.kh_checkbox.fill > input[type="checkbox"]:checked + span::before{border:2px solid #fff;}
Comments
Post a Comment