如何在输入字段中显示/隐藏图标

Question

我有一个输入字段类型的密码，我试图把显示/隐藏图标里面。问题是图标,它实际上是另一个输入字段和html我不能把一个输入字段在另一个输入字段。

有人能帮帮我吗?也许css可以解决这个问题?对不起，但我不是很擅长这个，我感谢任何回答，谢谢。

function showPassword() {
var x = document.getElementById("password_current");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}

/*Toggle Password class*/
#togglePw { display: none; }
#togglePw + label:before { content: "f06e"; }
#togglePw:checked + label:before { content: "f070"; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<p class="">
<label class="t2" for="password_current"></label>
<input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>   <input type="checkbox" id="togglePw" onclick="showPassword()"/> 
<label for="togglePw" class="fa"></label>
</p>

Answer 1

我建议使用绝对定位来对齐图标。

将两个输入(password &复选框)

<div id="password-input-toggle">
<input id="your-password-field"/>
<input type="checkbox" id="your-toggle-checkbox"/>
</div>

#password-input-toggle {
position: relative;
}
#your-toggle-checkbox {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}

Answer 2

只需使用一些CSS将其向左推一点，不要忘记在输入控件上允许填充，以便文本不会覆盖它。

function showPassword() {
var x = document.getElementById("password_current");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}

/*Toggle Password class*/
#togglePw {
display: none;
}
#togglePw+label:before {
content: "f06e";
}
#togglePw:checked+label:before {
content: "f070";
}

/* add these: */
#togglePw+label {
position: relative;
left: -30px;
cursor: pointer;
}
#password_current {
padding-right: 30px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<p class="">
<label class="t2" for="password_current"></label>
<input type="password" class="field-settings" name="password" id="password_current" autocomplete="off" /> <input type="checkbox" id="togglePw" onclick="showPassword()" />
<label for="togglePw" class="fa"></label>
</p>