xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Radio Buttons with CSS and jQuery</title>
<style>
.custom-radio{
width: 16px;
height: 16px;
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
background: url("/examples/images/radio.png") no-repeat;
}
.custom-radio:hover{
background: url("/examples/images/radio-hover.png") no-repeat;
}
.custom-radio.selected{
background: url("/examples/images/radio-selected.png") no-repeat;
}
.custom-radio input[type="radio"]{
margin: 1px;
position: absolute;
z-index: 2;
cursor: pointer;
outline: none;
opacity: 0;
}
/* Let's Beautify Our Form */
form{
margin: 20px;
}
label{
display: block;
padding: 2px 0;
}
input[type="submit"]{
float: left;
background: #f2f2f2;
border: 1px solid #CCCCCC;