Creating password field text hide show via a single class
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Current Password</label>
<div class="form-group pass_show">
<input type="password" value="
[email protected]" class="form-control" placeholder="Current Password">
</div>
<label>New Password</label>
<div class="form-group pass_show">
<input type="password" value="
[email protected]" class="form-control" placeholder="New Password">
</div>
<label>Confirm Password</label>
<div class="form-group pass_show">
<input type="password" value="
[email protected]" class="form-control" placeholder="Confirm Password">
</div>
</div>
</div>
</div>
.pass_show{position: relative}
.pass_show .ptxt {
position: absolute;
top: 50%;
right: 10px;
z-index: 1;
color: #f36c01;
margin-top: -10px;
cursor: pointer;
transition: .3s ease all;
}
.pass_show .ptxt:hover{color: #333333;}
,The author is faisalkhan123

Loading...