How to make a custom checkbox and radio button in pure css?
10,064
Solution 1
I have made the css based check box & radio buttons is it near by results ?
Solution 2
Try This:
HTML
<div class="checkbox">
<label class="i-checks">
<input type="checkbox" value=""> <i></i> Option one
</label>
</div>
<div class="radio">
<label class="i-checks">
<input type="radio" checked="" value="option2" name="a"> <i></i> Option two checked
</label>
</div>
CSS
.i-checks {
padding-left: 20px;
cursor: pointer;
}
.i-checks input {
opacity: 0;
position: absolute;
margin-left: -20px;
}
.i-checks input:checked + i {
border-color: #23b7e5;
}
.i-checks input:checked + i:before {
left: 4px;
top: 4px;
width: 10px;
height: 10px;
background-color: #23b7e5;
}
.i-checks input:checked + span .active {
display: inherit;
}
.i-checks input[type="radio"] + i, .i-checks input[type="radio"] + i:before {
border-radius: 50%;
}
.i-checks input[disabled] + i, fieldset[disabled] .i-checks input + i {
border-color: #dee5e7;
}
.i-checks input[disabled] + i:before, fieldset[disabled] .i-checks input + i:before {
background-color: #dee5e7;
}
.i-checks > i {
width: 20px;
height: 20px;
line-height: 1;
border: 1px solid #cfdadd;
background-color: #fff;
margin-left: -20px;
margin-top: -2px;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
position: relative;
}
.i-checks > i:before {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 0px;
height: 0px;
background-color: transparent;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.i-checks > span {
margin-left: -20px;
}
.i-checks > span .active {
display: none;
}
OR - follow the this URL: http://fronteed.com/iCheck/
Author by
Rohit Azad Malik
Rohit Azad I m Sr. Officer Front-End Technology at Times Internet (Times of India). My personal website. https://github.com/rohitazad My Blog URL. http://rohitazadmalik.blogspot.in/ http://front-end-developer.blogspot.in/ Top 20 User In Delhi India
Updated on June 30, 2022Comments
-
Rohit Azad Malik almost 2 years
I am trying to make a custom check box and radio button in pure css with cross browser compatible.
I am lookinga result like mentioned below image:-
I want to this only pure css with ie7
-
SykoTron about 11 yearsUnless you are the author of the article located at thecssninja.com/css/custom-inputs-using-css I don't know what to call you Mr Arora!
-
vals about 10 years@Emin You are very close, but not really on the spot. Look at the images used: background-image: url(css-tricks.com/wufoo/themes/customradiosandcheckboxes/radio.png);