![Step_2_2fig.gif]()
Step 3: In this step you have to add a style sheet code which is given below:
Code:
![Step3_fig.gif]()
Step 4: In this step you have to see from where you will add the jScript
reference which is given in the figure:
![Step_4fig.gif]()
Step 5: Let's see the jScript reference code which will be either in Head
section or can be placed inside the body section:
![Step_5_fig.gif]()
Step 6: In this step you will see the jQuery code which will be enclosed
between the <script></script> tag
jQuery Code:
![Step_6_fig.gif]()
Step 7: In this step we will see the Body code for the Default2.aspx page
design which is given below:
Body Code:
<body>
<form
runat="server">
<div
id="div1"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FFFF00; background-color:
#000000">
Highlighing the current input element using jQuery
</div>
<div>
<label
for="Name"
style="font-family:
'Comic Sans MS'; font-size:
large; color:
#800000">Name:
</label>
<input
name="Name"
type="text"/>
</div>
<div>
<label
for="Email"
style="font-family:
'Comic Sans MS'; font-size:
large; color:
#800000">Email:
</label>
<input
name="Email"
type="text"/>
</div>
<div>
<label
for="Pwd"
style="font-family:
'Comic Sans MS'; font-size:
large; color:
#800000">Password:
</label>
<input
name="Password"
type="text"/>
</div>
</form>
</body>
Step 8: In this step we will see the complete code for the Default2.aspx
page which is given below:
Code:
<%@
Page Language="VB"
AutoEventWireup="false"
CodeFile="Default2.aspx.vb"
Inherits="Default2"
%>
<!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></title>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<script
type="text/javascript">
$(document).ready(function () {
$("input").focus(function
() {
$(this)
.parent()
.addClass("curFocus input")
.children("div")
.toggle();
});
$("input").blur(function
() {
$(this)
.parent()
.removeClass("curFocus input")
.children("div")
.toggle();
});
});
</script>
<style type="text/css">
div.curFocus
{
background: -webkit-gradient
(linear,
left top, left
bottom,
color-stop(0%,#b7deed),
color-stop(50%,#71ceef),
color-stop(51%,#21b4e2),
color-stop(100%,#b7deed));
}
div.input
{
border:5px
groove yellow;
}
#div1
{
background: -webkit-gradient
(linear,
left top, left
bottom,
color-stop(0%,rgba(240,183,161,1)),
color-stop(50%,rgba(140,51,16,1)),
color-stop(51%,rgba(117,34,1,1)),
color-stop(100%,rgba(191,110,78,1)));
</style>
</head>
<body>
<form
runat="server">
<div
id="div1"
style="font-family:
'Comic Sans MS'; font-size:
x-large; color:
#FFFF00; background-color:
#000000">
Highlighing the current input element using jQuery
</div>
<div>
<label
for="Name"
style="font-family:
'Comic Sans MS'; font-size:
large; color:
#800000">Name:
</label>  
</div>
<div>
<label
for="Email"
style="font-family:
'Comic Sans MS'; font-size:
large; color:
#800000">Email:
</label>
<input
name="Email"
type="text"/>
</div>
<div>
<label
for="Pwd"
style="font-family:
'Comic Sans MS'; font-size:
large; color:
#800000">Password:
</label>
<input
name="Password"
type="text"/>
</div>
</form>
</body>
</html>
Step 9: In this step we will see the design of the Default2.aspx page let
see the figure which is given below:
![Step_9fig.gif]()
Step 10: At last you have to need to run the website by pressing F5 and the
related output is given below:
Output 1: This is the default output whenever you run the Default2.aspx page.
![Output1.gif]()
Output 2: In this output we will see that whenever we will go to write inside the first textbox then it will be highlighted.
![output2.gif]()
Output 3: In this output we will see that whenever we will go to write inside the second textbox then it will be highlighted.
![output3.gif]()
Output 4: In this output we will see that whenever we will go to write inside the third textbox then it will be highlighted.
![output4.gif]()
Here are some resources which may help you: