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;
}

<div class="col-md-12 text-container" style="margin: 7px;">
  <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
  <span id="btn" class="btn"><input type="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 -->
<div class="col-md-12 parent" style="margin: 7px;">
    <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> <input type="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;
}

<div class="col-md-12 text-container" style="margin: 7px;">
  <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
  <span id="btn" class="btn"><input type="checkbox" id="password" /></span>
</div>

<script type="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>