Register now or log in to join your professional community.
CSS: #foo:checked::before, input[type="checkbox"] { position:absolute; clip: rect(0,0,0,0); clip: rect(0000); } #foo:checked, input[type="checkbox"] + label::before { content: url('checkbox.png'); } input[type="checkbox"]:checked + label::before { content: url('checkbox-checked.png'); } #foo doesn't reference any particular element, it's there purely to prevent browsers from implementing the later selectors if it doesn't understand that (since most browsers will drop the entire selector if any part of it fails).
YES you can custom Radio buttons, Example:
HTML:
<div> <input type="radio" id="radio01" name="radio" /> <label for="radio01"><span></span>Radio Button1</label> </div> <div> <input type="radio" id="radio02" name="radio" /> <label for="radio02"><span></span>Radio Button2</label> </div>
CSS (style.css):
div {
margin:000.75em0;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color: #292321;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px4px00;
vertical-align:middle;
cursor:pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"] + label span {
background-color:#292321;
}
input[type="radio"]:checked + label span{
background-color:#CC3300;
}
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
-webkit-transition:background-color0.4s linear;
-o-transition:background-color0.4s linear;
-moz-transition:background-color0.4s linear;
transition:background-color0.4s linear;
}
Note: It might not work on all browsers specially old ones
Good Luck!!
We cannot customize through CSS or html. You have to compulsory use some kind of javascript ot jquery. I am using this from last5 years. Simple and best plugin in market:http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
