<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>Rz Rasel</TITLE>
<STYLE>
body, input{
font-family: Calibri, Arial;
}
input {
font-size: 15px;
}
.focus {
border: 2px solid #AA88FF;
background-color: #FFEEAA;
}
</STYLE>
</HEAD>
<BODY>
<H2>Changing Form Input (Textbox) Style on Focus using jQuery</H2>
<FORM id="sample">
<TABLE>
<TR>
<TD>Name </TD>
<TD><INPUT type="text"/></TD>
</TR>
<TR>
<TD>Age</TD>
<TD><INPUT type="text"/></TD>
</TR>
<TR>
<TD>Phone no.</TD>
<TD><INPUT type="text"/></TD>
</TR>
</TABLE>
</FORM>
</BODY>
<SCRIPT>
$('input[type="text"]').focus(function() {
$(this).addClass("focus");
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focus");
});
</SCRIPT>
</HTML> |
Post a Comment