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

Question

I have an input field type password, I'm trying to put show / hide icon inside it. The problem is the icon, it is actually another input field and with html I can't put an input field inside another input field.

Can someone help me ? Maybe with css there can be a solution? Sorry but I'm not very good with this, I appreciate any answer, thanks.

 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

Just use some CSS to nudge it left a little, not forgetting to allow for padding on the input control so text won't cover it.

 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>

Answer 2

I would suggest using absolute positioning to align the icon.

Wrap the two inputs (password & checkbox) in a div.

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