<style type="text/css">
.tb
{
background-image:url(textbox_signup.png);
background-repeat:no-repeat;
background-position:center;
width:304px;
height:38px;
border:0px;
background-color:transparent;
display:block;
clear:both;
padding-left:10px
}
.watermarkOn
{
text-align:left;
color: #000000;
font-size:medium;
font-style:normal;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px;
padding-left:10px
}
style>
<%----%>
<%----%>
<script src="js/jquery/jquery-1.6.3.min.js" type="text/javascript">script>
<script type="text/javascript">
$(document).ready(function () {
//User ID Focus -in -out
$("#txtuserid").focusin(function () {
$("#txtuserid").css({ 'border-color': 'rgba(82, 168, 236, 0.75)', 'box-shadow': ' 0 0 8px rgba(82, 168, 236, 0.5)', 'color': '#747170'
});
});
$("#txtuserid").focusout(function () {
$("#txtuserid").css({ 'box-shadow': 'none', 'color': '#000000' });
});
// Password Focus -in -out
$("#txtpassword").focusin(function () {
if ($(this).val() == "" || $(this).val() == "Password") {
document.getElementById('txtpassword').type = 'text';
}
else {
document.getElementById('txtpassword').type = 'password';
};
$("#txtpassword").css({ 'border-color': 'rgba(82, 168, 236, 0.75)', 'box-shadow': ' 0 0 8px rgba(82, 168, 236, 0.5)', 'color': '#747170' });
});
$("#txtpassword").focusout(function () {
$("#txtpassword").css({ 'box-shadow': 'none', 'color': '#000000' });
});
//Username -Keypress -blur event*************************************************************
//For User ID
$("#txtuserid").keypress(function () {
$(this).filter(function () {
return $(this).val() == "" || $(this).val() == "User Id"
}).removeClass("watermarkOn").val("");
}).addClass("watermarkOn").val("User Id");
$("#txtuserid").blur(function () {
$(this).filter(function () {
return $(this).val() == ""
}).addClass("watermarkOn").val("User Id");
});
//For Password
$("#txtpassword").keypress(function () {
document.getElementById('txtpassword').type = 'password';
$(this).filter(function () {
return $(this).val() == "" || $(this).val() == "Password"
}).removeClass("watermarkOn").val("");
}).addClass("watermarkOn").val("Password");
$("#txtpassword").blur(function () {
if ($(this).val() == "") {
document.getElementById('txtpassword').type = 'text';
};
$(this).filter(function () {
return $(this).val() == ""
}).addClass("watermarkOn").val("Password");
});
});
script>
*------------------------ in aspx-----------------------------
<asp:TextBox ID="txtuserid" runat="server" Text="User Id" class="loginbox">asp:TextBox>
<asp:TextBox ID="txtpassword" runat="server" Text="Password" class="loginbox" >asp:TextBox>
