Radio and check box styles look dramatically different depending on the browser and platform you are using.
There is a great way to style them to give them a custom look and feel, and we are going to take a look at how we can do that with CSS. However, just remember that it's not going to look perfect in every browser.
I have used below code to Default.aspx page
<form id="form" class="group" runat="server">
<h2>
Food Favorites</h2>
<div class="group">
<asp:CheckBox ID="CheckBox1" runat="server" /><asp:Label ID="Label1" AssociatedControlID="CheckBox1"
runat="server" Text="Italian"></asp:Label>
<asp:CheckBox ID="CheckBox2" runat="server" /><asp:Label ID="Label2" AssociatedControlID="CheckBox2"
runat="server" Text="Maxicon"></asp:Label>
<asp:CheckBox ID="CheckBox3" runat="server" /><asp:Label ID="Label5" AssociatedControlID="CheckBox3"
runat="server" Text="Japanese"></asp:Label>
</div>
<h2>
Rate from 1-5</h2>
<div class="group">
<asp:RadioButton ID="RadioButton1" GroupName="rate" runat="server" /><asp:Label ID="Label3"
AssociatedControlID="RadioButton1" runat="server" Text="1"></asp:Label>
<asp:RadioButton ID="RadioButton2" GroupName="rate" runat="server" /><asp:Label ID="Label4"
AssociatedControlID="RadioButton2" runat="server" Text="2"></asp:Label>
<asp:RadioButton ID="RadioButton3" GroupName="rate" runat="server" /><asp:Label ID="Label6"
AssociatedControlID="RadioButton3" runat="server" Text="3"></asp:Label>
</div>
</form>
Below is a CSS rule that applies to all checkbox and radio that you have used in web form.
input[type=checkbox], input[type=radio]{
border: none;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding: 0;
margin: 0;
}
.group:before, .group:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.group:after { clear: both; }
.group { zoom: 1; }
h2 {
font-size: 16px;
margin: 20px 5px 8px 0;
}
input[type=checkbox], input[type=radio] {
display: none;
}
div:not(#ray) > input[type=checkbox], div:not(#ray) > input[type=radio] {
display: none;
}
div:not(#ray) > label {
display: block;
float: left;
padding: 4px 10px 0 24px;
color: #000;
cursor: pointer;
}
div:not(#ray) > input[type=checkbox] + label {
background: url('uikit.png') no-repeat 0px -43px ;
}
div:not(#ray) > input[type=checkbox]:checked + label {
background-position: 0px -65px;
}
div:not(#ray) > input[type=radio] + label {
background: url('uikit.png') no-repeat;
}
div:not(#ray) > input[type=radio]:checked + label {
background-position: 0px -22px;
}
Demo
0 comments:
Post a Comment