Categories
How To Article

TextBox Background Color Change On Focus Using JQuery

TextBox Background Color Change On Focus Using JQuery

In this tutorial i will explain how to TextBox Background Color Change On Focus Using JQuery.To achieve this we don’t have to write so much code, a few lines of code is efficient for this.

Design View:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Hightechnology Tutorials</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('INPUT[type="text"]').focus(function () {
            $(this).addClass("colors");
        });

        $('INPUT[type="text"]').blur(function () {
            $(this).removeClass("colors");
        });
    });
</script>
<style type="text/css">
.colors {
border: 1px solid black;
background-color: #f7d0fb;
}
</style>
</head>
<body>
<form id="Hightech" runat="server">
<div>
<table>
<tr>
<td><b>Name:</b></td>
<td><asp:TextBox ID="Name" runat="server"/></td>
</tr>
<tr>
<td><b>Email:</b></td>
<td><asp:TextBox ID="Email" runat="server"/></td>
</tr>
</table>
</div>
</form>
</body>
</html>