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 Create Rounded Corners for Textbox in Asp.net

Nov 22, 2012
Introduction
  
Here I will explain how to make or create rounded corner textbox using
jQuery in asp.net.
Description:
  
In previous posts I explained
jQuery Change style of controls, Disable weekends in datepicker, Show multiple months in datepicker, and many articles relating to JQuery and datepicker. Now I will explain how to create rounded corner textbox using jQuery in asp.net.

We can implement rounded corner textboxes using CSS but it won't work in old browsers if we implement by using jQuery it will work in all browsers for that we need to write the code like this


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to Create Round Corner TextBox using JQuery</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script src="jquery.corner.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".divStyle").corner("round");
});
</script>

<style type="text/css">
.divStyle { width: 200px; height: 25px; background-color: #FEA400;margin:5px; }
.txtboxStyle { width: 180px; height: 20px; background-color: transparent; position: relativeleft: 10px; border-style: none; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
UserName:
<div class="divStyle">
<asp:TextBox ID="txtName" CssClass="txtboxStyle" runat="server"></asp:TextBox>
</div>
Location:
<div class="divStyle">
<asp:TextBox ID="txtLocation" CssClass="txtboxStyle" runat="server"></asp:TextBox>
</div>
</div>
</form>
</body>
</html>
If you observe above code in header section I added “jquery.corner.js” by using this plugin we can implement textboxes with rounded corners. If you want to know about this plugin check this site jQuery corner. By using this plugin we can implement in different kind of styles for those things check this site jQuery corner.

Demo

Download Sample 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

2 comments :

ram krishna said...

i want treeview examples with databasebase fields

Vishal Yadav said...

put style="border-radius:10px 10px 10px 10px"

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.