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 sitejQuery corner.
Demo
 |
No comments:
Post a Comment