Password Show Hide when click on eye icon on login page using HTML and jQuery

Hello Guy we have seen on many sites as there is one eye icon on above end of password input box so that will easer for user to know what they enter.

Now how we can do on same thing for our website ! for that we just need to add two class and little css and jQuery to achieve that.

Here is live demo

Im describing you guys to how we can add that option on your project password input box, lets start to do one bye one

STEP 1:

On step first we need to open existing login page or create own if we are doing this option on new project.

You need to add two class on your password input control wrapper as per below

...
<div class="controls show-hide-wpd">
<input type="password" name="password" id="password" value="" >
<span class="icon-eye show-pwd">
</span>	</div>
...

Above is code you need to replace with your input and need to add classes of boostrap as per your need Now we going add css for this. icon-eye is a class to use add eye icon you can use background image or you can use other font icons.

STEP 2:

<style type="text/css">
.main_login form {padding-top: 30px;}
 
.controls.show-hide-wpd span.icon-eye.show-pwd {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 28px;
    padding-top: 14px;
    width: 35px;
    text-align: center;
    cursor: pointer;
}
.controls.show-hide-wpd {
    position: relative;
}
.controls.show-hide-wpd input {
    padding-right: 32px !important;
    width:100%;
}
span.icon-eye.show-pwd.active:before, span.icon-eye.show-pwd:hover {
    color: #2184f6;
}
</style>

Above is css for adjust eye icon on above password input field

Now we adding jquery to change class and password visibility

STEP 3:

<script type="text/javascript">
	jQuery(document).on("click",".icon-eye.show-pwd",function(){
		jQuery(this).toggleClass("active");
		var input=jQuery(this).parent().find("input");
		if(input.attr("type")=="text")
			input.attr("type","password");
		else
			input.attr("type","text");
	});
</script>

Once you add above jquery then that will work you must need to added jquery min on your login screen otherwise above js will not work

Please review it and if not working just add comments i will help you