Change Style Of Checkboxes and Radio Buttons using CSS
_________________________________________________________________________
CSS Code
/*
Document : style
Created on : Aug 29, 2012, 3:59:32 PM
Author : Nick
Description:
Purpose of the stylesheet follows.
*/
html {
height:100%;
}
body {
position:relative;
background:#f2f2f2;
height:100%;
padding:0;
margin:0;
}
div#show {
width:280px;
height:200px;
padding:20px;
position:absolute;
left:50%;
margin-left:-120px;
top:50%;
margin-top:-160px;
background:#40464b;
border-radius:6px;
}
h1 {
font-size:14px;
color:#f2f2f2;
text-align:center;
margin:0 0 20px;
padding:0;
font-family:Arial;
}
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(check_radio_sheet.png) left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url(check_radio_sheet.png) -25px top no-repeat;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(check_radio_sheet.png) -57px top no-repeat;
}
______________________________________________________________________________
HTML BODY
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="show">
<h1>Easy CSS3 Checkboxes and Radio Buttons</h1>
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
<p>
<input type="checkbox" id="c2" name="cc" />
<label for="c2"><span></span>Check Box 2</label>
<p><br/>
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p>
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
</div>
</body>
</html>
_________________________________________________________________________
CSS Code
/*
Document : style
Created on : Aug 29, 2012, 3:59:32 PM
Author : Nick
Description:
Purpose of the stylesheet follows.
*/
html {
height:100%;
}
body {
position:relative;
background:#f2f2f2;
height:100%;
padding:0;
margin:0;
}
div#show {
width:280px;
height:200px;
padding:20px;
position:absolute;
left:50%;
margin-left:-120px;
top:50%;
margin-top:-160px;
background:#40464b;
border-radius:6px;
}
h1 {
font-size:14px;
color:#f2f2f2;
text-align:center;
margin:0 0 20px;
padding:0;
font-family:Arial;
}
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(check_radio_sheet.png) left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url(check_radio_sheet.png) -25px top no-repeat;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(check_radio_sheet.png) -57px top no-repeat;
}
______________________________________________________________________________
HTML BODY
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="show">
<h1>Easy CSS3 Checkboxes and Radio Buttons</h1>
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
<p>
<input type="checkbox" id="c2" name="cc" />
<label for="c2"><span></span>Check Box 2</label>
<p><br/>
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p>
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
</div>
</body>
</html>
No comments:
Post a Comment