V24s

"Get Updates : Subscribe to our e-mail newsletter to receive updates........" "Good Luck frnds" Admission 2018 Application Form 2018 Colleges Entrance Exam 2018 Results 2018 Notification 2018 University Educational Jobs 2018 Government Jobs 2018

Search This Blog v24s guys

Follow by Email

15 April, 2013

jQuery Create Rounded Corners for Textbox in Asp.net

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: 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 sitejQuery corner.

Demo

Post a Comment

Popular Posts

Recent Posts

Google Analytics