Stylish checkbox and radio button using CSS
In this article, we have design checkbox and radio
button using css, Many times we want to create attractive form so we need this
type of code.
Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkbox.aspx.cs" Inherits="checkbox" %>
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<title>Stylish Checkbox and radio button</title>
<style>
body {
margin: 0;
padding: 1.5em;
font-family: Georgia,Utopia,Charter,serif;
}
.example {
margin-bottom: 1.5em;
}
input[type=checkbox]:not(old),
input[type=radio ]:not(old) {
width: 2em;
margin: 0;
padding: 0;
font-size: 1em;
opacity: 0;
}
input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label {
display: inline-block;
margin-left: -2em;
line-height: 1.5em;
}
input[type=checkbox]:not(old) + label > span,
input[type=radio ]:not(old) + label > span {
display: inline-block;
width: 0.875em;
height: 0.875em;
margin: 0.25em 0.5em 0.25em 0.25em;
border: 0.0625em solid rgb(192,192,192);
border-radius: 0.25em;
background: rgb(224,224,224);
background-image: -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image: -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image: -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image: -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image: linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align: bottom;
}
input[type=checkbox]:not(old):checked + label > span,
input[type=radio ]:not(old):checked + label > span {
background-image: -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image: -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image: -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image: -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image: linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
input[type=checkbox]:not(old):checked + label > span:before {
content: '✓';
display: block;
width: 1em;
color: rgb(153,204,102);
font-size: 0.875em;
line-height: 1em;
text-align: center;
text-shadow: 0 0 0.0714em rgb(115,153,77);
font-weight: bold;
}
input[type=radio]:not(old):checked + label > span > span {
display: block;
width: 0.5em;
height: 0.5em;
margin: 0.125em;
border: 0.0625em solid rgb(115,153,77);
border-radius: 0.125em;
background: rgb(153,204,102);
background-image: -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image: -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image: -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image: -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image: linear-gradient(rgb(179,217,140),rgb(153,204,102));
}
</style>
</head>
<body>
<div class="example">
<div>
<input id="checkbox1" type="checkbox" name="checkbox" value="1" checked="checked"><label for="checkbox1"><span></span>Value 1</label>
</div>
<div>
<input id="checkbox2" type="checkbox" name="checkbox" value="2"><label for="checkbox2"><span></span>Value 2</label>
</div>
<div>
<input id="checkbox3" type="checkbox" name="checkbox" value="3"><label for="checkbox3"><span></span>Value 3</label>
</div>
</div>
<div class="example">
<div>
<input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span>Value 1</label>
</div>
<div>
<input id="radio2" type="radio" name="radio" value="2"><label for="radio2"><span><span></span></span>Value 2</label>
</div>
<div>
<input id="radio3" type="radio" name="radio" value="3"><label for="radio3"><span><span></span></span>Value 3</label>
</div>
</div>
</body>
</html>
Out-Put:-
Stylish checkbox and radio button using CSS
Reviewed by NEERAJ SRIVASTAVA
on
8:34:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
8:34:00 PM
Rating:
No comments: