How to Create Round Corner TextBox using Jquery in ASP.NET

Posted By  RRaveen On 18 Jan 2011 21:01:43
emailbookmarkadd commentsprint
No of Views:10258
Bookmarked:0 times
Votes:0 times

Introduction

In 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.

Implementation

As 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,

Image Loading

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 Project

Download source files -4 kb

Hopes help and thank you for reading.

Sign Up to vote for this article
Other popular Tips/Tricks
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top