KH Publishing. How to use pure HTML CSS to custom checkbox?
1. 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">
<!-- KH=Cambodia or Khmer -->
<label for="checkbox" class="kh_checkbox">
<input type="checkbox" id="checkbox">
<span>Check Box</span>
</label>
<label for="" class="kh_checkbox">
<input type="checkbox" disabled>
<span>Disable</span>
</label>
<label for="fill_in" class="kh_checkbox fill_in">
<input type="checkbox" id="fill_in">
<span>Check Box Fill In</span>
</label>
<label for="fill_out" class="kh_checkbox fill_out">
<input type="checkbox" id="fill_out">
<span>Check Box Fill Out</span>
</label>
<!-- //KH=Cambodia or Khmer -->
</div>
<!-- container -->
</div>
<!-- //wrap-->
</body>
</html>
2. Reset.css
@charset "utf-8";
/* fallback */
/* English Font */
@font-face{
font-family: "MontserratLight";
src: local("Montserrat Light"), url('../fonts/webfont/Montserrat-Light.otf') format('opentype');
font-weight:normal;
font-style:normal;
}
header,nav,section,article,aside,footer,hgroup,menu,canvas,figcaption,figure{display:block;}
html,body,table,th,td,div,p,ol,ul,li,img,a,h1,h2,h3,h4,h5,h6,form,fieldset,label,input,textarea,select,span,iframe,dl,dt,dd,pre,blockquote,time,hr{margin:0;padding:0;font-family:'MontserratLight';font-size:14px;color:#183150;}
/* basic */
html,body{width:100%;height:100%;}
body{font-family:'MontserratLight';font-size:14px;color:#183150;}
dl,ul,ol{list-style:none;}
table{empty-cells:show;border-collapse:collapse;width:100%;table-layout:fixed;}
fieldset{border:none;}
legend,caption,hr{display:none;}
img{border:none;}
img{vertical-align:middle;}
label,
input,
input::placeholder{font-size:14px;font-family:'MontserratLight';}
ul > li, ol > li{float:left;display:block;width:100%;}
/* align */
.t_center{text-align:center !important;}
.t_right{text-align:right !important;}
.t_left{text-align:left !important;}
.v_top{vertical-align:top !important;}
.v_middle{vertical-align:middle !important;}
.v_bottom{vertical-align:bottom !important;}
.f_right{float:right !important;}
.f_left{float:left !important;}
.f_none{float:none !important;}
.cboth{clear:both;*overflow:hidden;}
.cboth:before,.cboth:after{display:table;content:'';}
.cboth:after{clear:both;}
/* default link */
a{display:block;margin:0;padding:0;cursor:pointer;}
a:link,a:visited{text-decoration:none;color:#555;}
a:hover,a:active{text-decoration:none;color:#555;}
a > i{display:inline-block;vertical-align:top;margin:0;padding:0;font-size:16px;}
/* font color */
.txt_r{color:#f44949 !important;}
.txt_b{color:#4c73b4 !important;}
.txt_g{color:#999 !important;}
/* margin/padding */
.mgt10{margin-top:10px !important;}
.mgt20{margin-top:20px !important;}
.mgb5{margin-bottom:5px !important;}
.mgb10{margin-bottom:10px !important;}
.mgb15{margin-bottom:15px !important;}
.mgb20{margin-bottom:20px !important;}
.mgb25{margin-bottom:25px !important;}
.mgb30{margin-bottom:30px !important;}
.mgr20{margin-right:20px !important;}
.pdl0{padding-left:0 !important;}
/* etc */
.blind{display:none !important;}
.skip{position:absolute;top:-100000px;left:-100000px;visibility:hidden;overflow:hidden;}
/* IE10 input type auto x delete */
input[type=text]::-ms-clear,input[type=file]::-ms-clear{display:none;}
/*!
* Waves v0.6.0
* http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/
.waves-effect{position: relative;cursor: pointer;display: inline-block;overflow: hidden;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;vertical-align: middle;z-index: 1;will-change: opacity, transform;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.waves-effect .waves-ripple{position: absolute;border-radius: 50%;width: 20px;height: 20px;margin-top: -10px;margin-left: -10px;opacity: 0;background: rgba(0, 0, 0, 0.2);-webkit-transition: all 0.7s ease-out;transition: all 0.7s ease-out;-webkit-transition-property: -webkit-transform, opacity;-webkit-transition-property: opacity, -webkit-transform;transition-property: opacity, -webkit-transform;transition-property: transform, opacity;transition-property: transform, opacity, -webkit-transform;-webkit-transform: scale(0);transform: scale(0);pointer-events: none;}
.waves-effect.waves-light .waves-ripple{background-color: rgba(255, 255, 255, 0.45);}
.waves-effect.waves-red .waves-ripple{background-color: rgba(244, 67, 54, 0.7);}
.waves-effect.waves-yellow .waves-ripple{background-color: rgba(255, 235, 59, 0.7);}
.waves-effect.waves-orange .waves-ripple{background-color: rgba(255, 152, 0, 0.7);}
.waves-effect.waves-purple .waves-ripple{background-color: rgba(156, 39, 176, 0.7);}
.waves-effect.waves-green .waves-ripple{background-color: rgba(76, 175, 80, 0.7);}
.waves-effect.waves-teal .waves-ripple{background-color: rgba(0, 150, 136, 0.7);}
.waves-effect.waves-blue .waves-ripple{background-color: rgba(20, 84, 226, 0.5);}
.waves-notransition{-webkit-transition: none !important;transition: none !important;}
.waves-circle{-webkit-transform: translateZ(0);transform: translateZ(0);text-align: center;width: 2.5em;height: 2.5em;line-height: 2.5em;border-radius: 50%;}
.waves-input-wrapper{border-radius: 0.2em;vertical-align: bottom;}
.waves-input-wrapper .waves-button-input{position: relative;top: 0;left: 0;z-index: 1;}.waves-block{display: block;}
3. Content CSS
.kh_checkbox{
position:relative;
display:block;
height:40px;
margin:0;
padding:0 0 0 30px;
overflow:hidden;
}
.kh_checkbox input[type=checkbox]{display:none;}
.kh_checkbox input[type=checkbox] + span{display:block;height:40px;
font-size:18px;
line-height:40px;
color:#00833e;
}
.kh_checkbox input[type=checkbox] + span::before{
content: "";
position:absolute;
top:9px;left:0;
width:20px;
height:20px;
border:2px solid #00833e;
transition:0.3s ease-out;
-webkit-transition:0.3s ease-out;
border-radius:5px;
}
.kh_checkbox input[type=checkbox]:checked + span::after{
content: "";
position:absolute;
top:11px;left:8px;
width:6px;
height:14px;
border:2px solid #00833e;
border-top:0;
border-left:0;
transform: rotate(45deg);
transition:0.3s ease-out;
-webkit-transition:0.3s ease-out;
}
/* Check box */
.kh_checkbox input[type=checkbox]:disabled + span::before{
background-color:#00833e;
opacity:0.5;
}
.kh_checkbox input[type=checkbox]:disabled + span{opacity:0.5;}
/* Fill In*/
.kh_checkbox.fill_in input[type=checkbox]:checked + span::before{
background-color:#00833e;
}
.kh_checkbox.fill_in input[type=checkbox]:checked + span::after{
border:2px solid #fff;
border-top:0;border-left:0;
}
/* Fill Out*/
.kh_checkbox.fill_out input[type=checkbox]:checked + span::before{
border:2px solid transparent;
}
No comments