Custom Checkboxlist Design through CSS3

hussainasdsd

Rate me:

4.83/5 (3 votes)

17 Nov 2013CPOL

27.3K

Custom checkboxlist design through CSS3

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

ASP.NET

//
// <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

JavaScript

<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

CSS

<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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

hussainasdsd

United States

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.