<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-md-4 col-sm-4 col-xs-4"> <form> <div class="form-group form-group__eyes"> <label for="passwordEyes">Password</label> <input class="form-control" id="passwordEyes" placeholder="Password" type="password"> <img class="eyes" onclick="textChange(this)" src="https://i.ibb.co/Hp0xx9P/hide.png" alt=""> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div>

.form-group__eyes{ position: relative; } .eyes{ right: 10px; top: 43px; position: absolute; width: 16px; cursor: pointer; opacity: .8; }

let pass = document.getElementById('passwordEyes'); function textChange(x){ let a = x.src; if(a=="https://i.ibb.co/Hp0xx9P/hide.png"){ x.src = "https://i.ibb.co/6PyYnFW/view.png"; pass.type = "text"; } else{ x.src = "https://i.ibb.co/Hp0xx9P/hide.png"; pass.type = "password"; } }