Introduction:
Here I will explain how to make or create rounded corner textbox using jQuery in asp.net.
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.
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:
relative;
left: 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 Email
|
|||
2 comments :
i want treeview examples with databasebase fields
put style="border-radius:10px 10px 10px 10px"
Note: Only a member of this blog may post a comment.