How To Insert A Checkbox Inside A Input Password Field

I want my web page to display a check box inside the password field. User clicks on the check box and see the password as text. On un-check, its password again. This is what I want

Solution 1:

Just add CSS and move your checkbox to one group div with input text. See the example

#eye {
  position:absolute;
  right:50px;
  top:6px;
}

Click Here

Solution 2:

This would be the solution.

.text-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

<divclass="col-md-12 text-container"style="margin: 7px;"><inputtype="password"id="reg_password"name="reg_password"style="height: 35px;"class="form-control input-lg"placeholder="Password"ng-model="register_password" /><spanid="btn"class="btn"><inputtype="checkbox"id="eye"onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /></span></div>

Solution 3:

input#eye {
    position: absolute;
    right: 10px;
    top: 10px;
}
#reg_password.form-control.input-lg {
    position: relative;
}
.parent{position:absolute;}

<!-- Set a password for the account --><divclass="col-md-12 parent"style="margin: 7px;"><inputtype="password"id="reg_password"name="reg_password"style="height: 35px;"class="form-control input-lg"placeholder="Password"ng-model="register_password" /><inputtype="checkbox"id="eye"onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /></div>

Solution 4:

.text-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.btn {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: right 0.2s;
}

<divclass="col-md-12 text-container"style="margin: 7px;"><inputtype="password"id="reg_password"name="reg_password"style="height: 35px;"class="form-control input-lg"placeholder="Password"ng-model="register_password" /><spanid="btn"class="btn"><inputtype="checkbox"id="password" /></span></div><scripttype="text/javascript">
 $(document).ready(function () {
 $("#password").click(function () {
 if ($("#reg_password").attr("type")=="password") {
 $("#reg_password").attr("type", "text");
 }
 else{
 $("#reg_password").attr("type", "password");
 }

 });
 });
</script>