Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery Custom Styles for Radio button, checkbox, dropdownlist and textbox in asp.net

Dec 29, 2011
Introduction:

In this article I will explain how to change the style of radiobutton, checkbox, dropdownlist, textbox and buttons in asp.net using JQuery.


Description:
  
In previous posts I explained many articles relating to JQuery those are fancy zoom effect for image and Change Controls background and border color when validation fails etc. Now I will explain how to change the style of form controls using JQuery in asp.net.
In one of the website I saw registration form that contains controls with rich interface all the controls looking very beautiful. After seen that one I decided to write post to explain about how to change form controls dynamically in asp.net we can implement this functionality easily by using available JQuery plugins.
Initially I created new website and designed Registration form with some controls before apply JQuery plugin functionality our controls will display in default format check below image for controls default format
Now open Visual Studio and create new website after that right click on your website and add new folder and give name as js and insert script files in folder you should get it from attached folder. After that write the following code in your aspx page 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Change form controls in asp.net using JQuery</title>
<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script>
<script language="javascript" type="text/javascript">
$(function() {
$('form').jqTransform({ imgPath: 'jqtransformplugin/img/' });
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
form{clear:both;}
</style>
</head>
<body>
<form id="Form1" runat="server" >
<table align="center">
<h2>Billing Information</h2>
<tr>
<td colspan="2">
<div style="border: 1px solid #CCCCCC; padding: 10px;">
<table>
<tr class="rowElem">
<td>First Name:</td>
<td><asp:TextBox ID="txtfname"  runat="server"/></td>
</tr>
<tr class="rowElem">
<td>Last Name:</td>
<td><asp:TextBox ID="txtlname"  runat="server"/></td>
</tr>
<tr class="rowElem">
<td>Gender:</td>
<td>
<asp:RadioButtonList ID="rdbGender" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="0" Text="Male"></asp:ListItem>
<asp:ListItem Value="1" Text="Female"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr class="rowElem">
<td>Languages:</td>
<td>
<asp:CheckBoxList ID="chklang" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="0">Telugu</asp:ListItem>
<asp:ListItem Value="1">English</asp:ListItem>
<asp:ListItem Value="2">Hindi</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr  class="rowElem">
<td>Email:</td>
<td><asp:TextBox ID="txtemail" runat="server" />
</td>
</tr>
<tr class="rowElem">
<td valign="top">Address:</td>
<td>
<asp:TextBox ID="txtaddress" runat="server" TextMode="MultiLine" Rows="8" Columns="26"/></td>
</tr>
<tr class="rowElem">
<td>State:</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" >
<asp:ListItem value="">Choose State</asp:ListItem>
<asp:ListItem Value="AL">Alabama</asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem  value="AL">Alabama </asp:ListItem>
<asp:ListItem  value="AK">Alaska</asp:ListItem>
<asp:ListItem  value="AZ">Arizona</asp:ListItem>
<asp:ListItem  value="AR">Arkansas</asp:ListItem>
<asp:ListItem  value="CA">California</asp:ListItem>
<asp:ListItem  value="CO">Colorado</asp:ListItem>
<asp:ListItem  value="CT">Connecticut</asp:ListItem>
<asp:ListItem  value="DE">Delaware</asp:ListItem>
<asp:ListItem  value="FL">Florida</asp:ListItem>
<asp:ListItem  value="GA">Georgia</asp:ListItem>
<asp:ListItem  value="HI">Hawaii</asp:ListItem>
<asp:ListItem  value="ID">Idaho</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr class="rowElem">
<td>Zip:</td>
<td>
<asp:TextBox ID="txtZip" runat="server" />
</td>
</tr>
<tr class="rowElem">
<td>Credit Card Type:</td>
<td>
<asp:DropDownList ID="ddlCardType" runat="server" Width="180px" >
<asp:ListItem Value="">Choose Credit Card</asp:ListItem>
<asp:ListItem value="amex">American Express</asp:ListItem>
<asp:ListItem value="discover">Discover</asp:ListItem>
<asp:ListItem value="mastercard">MasterCard</asp:ListItem>
<asp:ListItem value="visa">Visa</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr class="rowElem">
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
If you observe above code in header section I added some of script files and css files by using those files we have a chance to highlight controls when validation fails using JQuery in asp.net. Here one thing we need to remember that is if we want add style for particular control then we need to add class class="rowElem".

Now run your application and check your form controls style how it would be

Demo

Download sample code attached 






If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

8 comments :

SaiPrasad said...

Thanks for the Valuable posts...Can u Just tell us how to us DataAdapter Update method..???
Waiting for ur Post....

Danielle Copp said...

Awesome! I've been looking for a way to make custom bullets and check-boxes in ASP.NET for a while.

Only problem I ran into is, you cannot select a check-box in a check-box list by clicking on its label.

However, if you create individual check-boxes you can associate a label to that check-box.

vikram said...

hi! i need pure asp.net code for adding and selecting check boxes with in dropdownlist

Abhith said...

hi,
the post is awesome,but i have problem when using the same jquery along with update panel.Its working on the page load but while partial load in the page the layout goes classic,how to fix it?

SANJAYA said...

good aricle

Pixy Digital said...

Hello sir,
I am using bootstrap with asp.net c# website, every thing is fine. but postback event of radio button and checkbox is not working.

can any one help me , how to do this. or how we can remove css/jquery for the radio button/ checkbox.

please help.

thanks

Anonymous said...

Can U put articles related .Net MVC .........

Unknown said...

Can you please tell me how to add style in only one control in Form ??
It render in all controls by default

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.