Introduction
This tip shows how we can custom design checkboxlist or checkbox in ASP.NET like in HTML CSS3.
Background
We can design checkbox in HTML through CSS3 so we thought why can't we do this in ASP.NET controls.
Using the Code
The basic concept behind this is when we create a checkbox list, it creates an HTML in background same as HTML checkbox... so we will create checkbox list in ASP.NET and will code it for HTML and CSS3.
HTML Body Tag Code
//
// <body onload="changecss();changecss1();">
// <form id="form1" runat="server">
//
//
//
// <div id="id2">
//<asp:CheckBoxList id="chklstMembers"
//Runat="server" RepeatDirection="Vertical"
//RepeatColu//mns="4" RepeatLayout="Table"
// Width="800" CssClass="css-checkbox" >
// <asp:ListItem>a</asp:ListItem>
// <asp:ListItem>b</asp:ListItem>
// <asp:ListItem>c</asp:ListItem>
// <asp:ListItem>d</asp:ListItem>
// </asp:CheckBoxList>
// </div>
//
// </div>
// <div id="id3">
//<asp:CheckBoxList id="CheckBoxList1"
//Runat="server" RepeatDirection="Vertical"
// RepeatColumns="4" RepeatLayout="Table"
// Width="800" CssClass="css-checkbox" AutoPostBack="True"
// onselectedindexchanged="CheckBoxList1_SelectedIndexChanged" >
// <asp:ListItem>a</asp:ListItem>
// <asp:ListItem>b</asp:ListItem>
// <asp:ListItem>c</asp:ListItem>
// <asp:ListItem>d</asp:ListItem>
// </asp:CheckBoxList>
// </div>
// </form>
//</body>
//
JavaScript Code
<script >
function changecss() {
var divs = document.getElementById
("id2").getElementsByTagName("input");
for (var i = 0; i < divs.length; i++) {
var _id = divs[i].id;
document.getElementById(divs[i].id).setAttribute
("class", "css-checkbox");
}
}
function changecss1() {
var divs = document.getElementById
("id3").getElementsByTagName("input");
for (var i = 0; i < divs.length; i++) {
var _id = divs[i].id;
document.getElementById(divs[i].id).setAttribute
("class", "css-checkbox");
}
}
</script>
CSS Code
<style type="text/css">
input[type=checkbox].css-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label {
padding-left:20px;
height:15px;
display:inline-block;
line-height:15px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:15px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label {
background-position: 0 -15px;
}
label{
background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}
</style>
Points of Interest
Now, we can have designed checkbox and checkboxlist in ASP.NET.
