 | |
| Fig:check_radio_sheet.png |
- <!DOCTYPE html>
- <html>
- <head>
- <link rel="stylesheet" href="gift.css?v=1.0">
- <title>radio button,checkbox styling using css3 and HTML5</title>
- </head>
- <body>
- <p>
- <input type="radio" id="chkgift-1" value="1">Gift one<label for="chkgift-1"></label><input type="radio" id="chkgift-2" value="2">Gift Two<label for="chkgift-2"></label>
- <p>
- <p>
- <p>
- </body>
- </html>
gift.css
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
position: absolute;
top:3px;
left:3px;
width:19px;
height:19px;
vertical-align:middle;
background:url("../images/check_radio_sheet.png") -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url("../images/check_radio_sheet.png") -57px top no-repeat;
}
-ahmedabad-webs.jpg)
Posts
0 comments:
Post a Comment
Thanks for your valuable Comment