KH Publishing. How to Create Custom Radio Button using Pure HTML and CSS
n this video, I'll show you how to create a custom radio button using pure HTML and CSS. This is a great tutorial if you want to learn how to customize radio buttons in a simple, effective way.
If you're looking to learn more about HTML and CSS, then this is the video for you! In this tutorial, I'll show you how to create a custom radio button using only HTML and CSS. This is a great tutorial if you want to learn how to customize radio buttons in a simple, effective way. We'll also look at some common CSS properties, so you'll be able to apply these techniques to your own projects!
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 Radio Button</h1>
</div>
<!-- //title_wrap-->
<!-- container -->
<div class="container">
<label class="kh_radio">
<input type="radio" name="cambodia">
<span>Love the Cambodian people</span>
</label>
<label class="kh_radio">
<input type="radio" name="cambodia">
<span>Love Cambodia</span>
</label>
<label class="kh_radio">
<input type="radio" disabled>
<span>Disable Radio</span>
</label>
</div>
<!-- container -->
</div>
<!-- //wrap-->
</body>
</html>
02. 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;}
03. Content.css
/* Container */
.container{padding:20px;}
/* Customer Radio Button */
.kh_radio{
position:relative;
display:block;
height:40px;
padding:0 0 0 40px;
overflow:hidden;
border-bottom:1px solid #ccc;
}
.kh_radio input[type="radio"]{display:none;}
.kh_radio input[type="radio"] + span{
display:inline-block;
vertical-align:top;
font-size:18px;
color:#00833e;
line-height:38px;
}
.kh_radio input[type="radio"] + span::before{
content:"";
position:absolute;
top:8px;left:0;
width:20px;height:20px;
border:2px solid #00833e;
border-radius:50%;
}
.kh_radio input[type="radio"]:checked + span::after{
content:"";
position:absolute;
top:12px;left:4px;
width:16px;height:16px;
background-color:#00833e;
border-radius:50%;
}
.kh_radio input[type="radio"]:disabled + span::before{
background-color:#00833e;
opacity:0.6;
}
.kh_radio input[type="radio"]:disabled + span{
opacity:0.6;
}
No comments