<div class="main">
<div class="containmain">
<div class="center">
<form class="form" action="demo_form.asp" autocomplete="on">
<input type="text" class="topform" placeholder="Username" name="fname"><br>
<input type="password" class="bottomform" placeholder="Password" name="lname"><br>
<input type="submit">
</form>
</div>
</div>
</div>
/******************************
http://www.freetimelearning.com
http://www.freetimelearn.com
*******************************/
.main{ margin:40px auto 20px !important; width:450px;}
body{
background:#F2F2F2;
}
.containmain{
width:100%;
display:none;
}
.center{
margin: 50px auto;
width:400px;
background:#FC3;
padding-top:1%;
padding-right:3%;
padding-bottom:5%;
}
input {
width:100%;
outline: none;
padding: 25px;
border:none;
}
input[type=submit] {
background:#DBBB06;
border:none;
color:white;
padding:15px;
width:290px;
font-size:15px;
cursor:pointer;
}
input[type=submit]:hover{
color:#000;
background:#F0F000
}
.form{
width:250px;
margin: 0 auto;
margin-top:40px;
}
.topform{
border-bottom:2px solid lightgrey;
margin:10px 0px;
padding:15px 20px;
background-image: url('http://www.flaticon.com/png/256/16612.png');
background-repeat: no-repeat;
background-color:white;
background-size: 7%;
background-position: 50% 50%;
}
.bottomform{
padding:15px 20px;
margin-top:0px;
margin-bottom:15px;
background-image: url('http://www.flaticon.com/png/256/25239.png');
background-repeat: no-repeat;
background-color:white;
background-size: 11%;
background-position: 50% 50%;
}
$(window).load(function(){
$('.containmain').slideDown(700);
});
$(window).ready(function(){
$(".topform , .bottomform").focus(function() {
$(this).css({'background-image': 'none'});
});
if ($('.topform').is(':empty')){
$(".topform").focusout(function(){
imageUrl = 'http://www.flaticon.com/png/256/16612.png';
$(this).css('background-image', 'url(' + imageUrl + ')');
});
} else if ($('.topform').not(':empty')){
$(this).css('background-image', 'none');
}
$(".bottomform").focusout(function(){
imageUrl = 'http://www.flaticon.com/png/256/25239.png';
$(this).css('background-image', 'url(' + imageUrl + ')');
});
$('.close').click(function(){
$('.containmain').slideUp(function(){
$('.close').text("Open").addClass("not");
});
});
$("#close").click(function(){
if ($( "#close" ).hasClass( "not" )){
$('.containmain').slideDown(function(){
$('.close').text("Close").removeClass("not");
});
}
});
});