Checkbox & Radio UI - CSS only
HTML
<h2>CSS only custom Checkbox and Radio UI <small><a href="http://bootstrapsale.com">http://bootstrapsale.com</a></small></h2>
<div class="box">
<div class="checkbox">
<label>
<input type="checkbox" />
<i class="input-helper"></i>
<span>Maecenas faucibus mollis interdum.</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />
<i class="input-helper"></i>
<span>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />
<i class="input-helper"></i>
<span>Donec sed odio dui.</span>
</label>
</div>
<hr />
<div class="radio">
<label>
<input name="radio" type="radio" />
<i class="input-helper"></i>
<span>Aenean lacinia bibendum nulla sed consectetur.</span>
</label>
</div>
<div class="radio">
<label>
<input name="radio" type="radio" />
<i class="input-helper"></i>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</label>
</div>
<div class="radio">
<label>
<input name="radio" type="radio" />
<i class="input-helper"></i>
<span>Nulla vitae elit libero, a pharetra augue.</span>
</label>
</div>
</div>
LESS
@import 'https://fonts.googleapis.com/css?family=Roboto';
* {
padding: 0;
margin: 0;
}
body {
font-size: 14px;
color: #333;
padding: 50px;
font-family: 'Roboto', sans-serif;
}
h2 {
text-align: center;
font-size: 25px;
margin: 20px 0;
color: #000;
small {
font-size: 14px;
display: block;
text-decoration: none;
margin-top: 10px;
a {
text-decoration: none;
color: #a2a2a2;
}
}
}
hr {
background-color: #eee;
border: 0;
height: 1px;
margin: 40px -50px;
}
.box {
width: 500px;
background: #fff;
border-radius: 3px;
padding: 50px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
height: 245px;
}
.checkbox,
.radio {
position: relative;
margin-bottom: 20px;
label {
padding-left: 30px;
display: block;
}
input {
top: 0;
left: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
position: absolute;
&:checked + .input-helper {
&:before {
border-color: #009688;
}
}
}
.input-helper {
&:before,
&:after {
position: absolute;
content: "";
transition: all 200ms;
}
&:before {
left: 0;
border: 2px solid #7a7a7a;
}
}
}
.checkbox {
input {
width: 15px;
height: 15px;
&:checked + .input-helper {
&:before {
background-color: #009688;
}
&:after {
transform: scale(1);
opacity: 1;
}
}
}
.input-helper {
&:before {
top: -2px;
width: 15px;
height: 15px;
border-radius: 2px;
color: #fff;
}
&:after {
content: '\2713';
font-size: 13px;
left: 4px;
top: 2px;
color: #fff;
transform: scale(0);
opacity: 0;
}
}
}
.radio {
input {
width: 16px;
height: 16px;
&:checked + .input-helper {
&:after {
transform: scale(1);
}
}
}
.input-helper {
&:before {
top: -3px;
width: 16px;
height: 16px;
border-radius: 50%;
}
&:after {
width: 10px;
height: 10px;
background: #009688;
border-radius: 50%;
top: 2px;
left: 5px;
transform: scale(0);
}
}
}
1 Response