Css 如何在输入密码字段中插入复选框

我希望我的网页在密码字段中显示一个复选框。用户单击复选框并将密码视为文本。取消检查时，请重新输入密码

这就是我想要的。这是从易趣网站登录页面。

这就是我得到的

我希望此复选框位于密码字段内。我在网上找不到关于这个话题的任何东西

这是我的密码：

<!-- Set a password for the account -->
<div class="col-md-12" 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" />
</div>
<input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />

---

这就是解决方案

.text容器{
显示：内联块；
位置：相对位置；
溢出：隐藏；
}
.btn{
位置：绝对位置；
顶部：10px；
右：10px；
}

input#眼睛{
位置：绝对位置；
右：10px；
顶部：10px；
}
#reg_password.form-control.input-lg{
位置：相对位置；
}
.parent{位置：绝对；}

---

只需添加CSS并将复选框移动到一个包含输入文本的分组div。 参见示例

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

.text容器{
显示：内联块；
位置：相对位置；
溢出：隐藏；
}
.btn{
位置：绝对位置；
顶部：10px；
右：10px；
过渡：右0.2s；
}
$（文档）.ready（函数（）{
$（“#密码”）。单击（函数（）{
如果（$（“#注册密码”）.attr（“类型”）=“密码”）{
$（“注册密码”）.attr（“类型”、“文本”）；
}
否则{
$（“注册密码”）.attr（“类型”、“密码”）；
}
});
});

我想你可以通过css的position属性来实现，给出输入元素的相对位置，以及复选框的绝对位置，这样你就可以相对于输入移动复选框了。谢谢老兄。。工作

.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>