IntroductionIn this tip, I will show you, how to create round corner textbox using JQuery. The JQuery is powerful library to manipulate client side HTML, CSS and etc. ImplementationAs usual create a web project with visual studio and add JQuery library source in page. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="roundTextBox.aspx.cs" Inherits="roundTextBox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>And then modify the page html code as like below to create round textboxes. <div>
Name:
<div class="divname">
<asp:TextBox ID="txtName" CssClass="txtbox" runat="server"></asp:TextBox>
</div>
Address:
<div class="divname">
<asp:TextBox ID="txtAddress" CssClass="txtbox" runat="server"></asp:TextBox>
</div>
</div>
In order to create round textbox with JQuery, we have to add JQuery Round corner plug-in. Note: You can download from here Now Write simple style to textbox remove the border and set background color to transparent to parent div as like below. CSS <style>
.divname { width: 200px; height: 25px; background-color: #F2F7FE;margin:5px; }
.txtbox { width: 180px; height: 20px; background-color: transparent; position: relative; top: 5px; left: 10px; border-style: none; }
</style>Then write JavaScript code to apply the round corner to parent div in order to affect the child textbox control. Javascript <script language="javascript">
$(document).ready(function()
{
$(".divname").corner("round");
});
</script>Let's run application and see output as like below, The Complete Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="roundTextBox.aspx.cs" Inherits="roundTextBox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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">
$(document).ready(function()
{
$(".divname").corner("round");
});
</script>
<style>
.divname { width: 200px; height: 25px; background-color: #F2F7FE;margin:5px; }
.txtbox { width: 180px; height: 20px; background-color: transparent; position: relative; top: 5px; left: 10px; border-style: none; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
Name:
<div class="divname">
<asp:TextBox ID="txtName" CssClass="txtbox" runat="server"></asp:TextBox>
</div>
Address:
<div class="divname">
<asp:TextBox ID="txtAddress" CssClass="txtbox" runat="server"></asp:TextBox>
</div>
</div>
</form>
</body>
</html>
Download Sample ProjectDownload source files -4 kb Hopes help and thank you for reading. |