Hide/show toggle inside password input

Question

So I was wondering how I could place a svg toggle button inside the input['password'] like this

and when this is clicked, it would be displayed as this:

I've made a simple version, with a checkbox, but I don't know how to do this with a svg, and make it toggle.

The svg images I use is posted in the code.

function togglePass() {
  var x = document.getElementById("login-form-password");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

<p class="signin_title">Sign in</p>
<input type="text" id="login-form-username" name="os_username"  placeholder="Username" required><br><br>
<!-- Password -->
<input type="password" id="login-form-password" name="os_password" placeholder="Password" required><br>

<!-- An element to toggle between password visibility -->
<input type="checkbox" onclick="togglePass()">Show Password

<br><p>When password is hidden</p>
<svg id="Layer_1" data-name="Layer 1" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>eye-glyph</title><path d="M320,256a64,64,0,1,1-64-64A64.07,64.07,0,0,1,320,256Zm189.81,9.42C460.86,364.89,363.6,426.67,256,426.67S51.14,364.89,2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.14,147.11,148.4,85.33,256,85.33s204.86,61.78,253.81,161.25A21.33,21.33,0,0,1,509.81,265.42ZM362.67,256A106.67,106.67,0,1,0,256,362.67,106.79,106.79,0,0,0,362.67,256Z"/></svg><br>
<p>When password is shown </p>
<svg id="Layer_1" data-name="Layer 1" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>eye-disabled-glyph</title><path d="M409.84,132.33l95.91-95.91A21.33,21.33,0,1,0,475.58,6.25L6.25,475.58a21.33,21.33,0,1,0,30.17,30.17L140.77,401.4A275.84,275.84,0,0,0,256,426.67c107.6,0,204.85-61.78,253.81-161.25a21.33,21.33,0,0,0,0-18.83A291,291,0,0,0,409.84,132.33ZM256,362.67a105.78,105.78,0,0,1-58.7-17.8l31.21-31.21A63.29,63.29,0,0,0,256,320a64.07,64.07,0,0,0,64-64,63.28,63.28,0,0,0-6.34-27.49l31.21-31.21A106.45,106.45,0,0,1,256,362.67ZM2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.15,147.11,148.4,85.33,256,85.33a277,277,0,0,1,70.4,9.22l-55.88,55.88A105.9,105.9,0,0,0,150.44,270.52L67.88,353.08A295.2,295.2,0,0,1,2.19,265.42Z"/></svg>

So how exactly do I create this using svg?

Thought about maybe if its possible to use the checkbox, and with some js look if its clicked or not, and change the svg depending on that? and then with some css, try to move it inside the input['password']? ` Something like this but with a svg

input[type="text"] {
    width: 200px;
    height: 20px;
    padding-right: 50px;
}

input[type="submit"] {
    margin-left: -50px;
    height: 25px;
    width: 50px;
    background: blue;
    color: white;
    border: 0;
    -webkit-appearance: none;
}

<input type="text"><input type="submit" value="SVG">

Answer 1

You can try to place SVG inside input using absolute position, and then to add onclick event on SVG itself. Something like this:

function togglePass() {
  var x = document.getElementById("login-form-password");
  var l1 = document.getElementById("Layer_1");
  var l2 = document.getElementById("Layer_2");
  if (x.type === "password") {
    x.type = "text";
    l1.setAttribute('hidden', true);
    l2.removeAttribute('hidden');
  } else {
    x.type = "password";
    l1.removeAttribute('hidden');
    l2.setAttribute('hidden', true);
  }
}

[hidden] { display: none; }

.form-group {
  position: relative;
  width: 170px;
}
.form-group svg {
  position: absolute;
  right: 10px;
  top: 2px;
  width: 16px;
  height: auto;
}

<p class="signin_title">Sign in</p>
<input type="text" id="login-form-username" name="os_username"  placeholder="Username" required><br><br>
<!-- Password -->
<div class="form-group">
<input type="password" id="login-form-password" name="os_password" placeholder="Password" required>

<svg onclick="togglePass()" id="Layer_1" data-name="Layer 1" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>eye-glyph</title><path d="M320,256a64,64,0,1,1-64-64A64.07,64.07,0,0,1,320,256Zm189.81,9.42C460.86,364.89,363.6,426.67,256,426.67S51.14,364.89,2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.14,147.11,148.4,85.33,256,85.33s204.86,61.78,253.81,161.25A21.33,21.33,0,0,1,509.81,265.42ZM362.67,256A106.67,106.67,0,1,0,256,362.67,106.79,106.79,0,0,0,362.67,256Z"/></svg>
<svg onclick="togglePass()" hidden id="Layer_2" data-name="Layer 2" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>eye-disabled-glyph</title><path d="M409.84,132.33l95.91-95.91A21.33,21.33,0,1,0,475.58,6.25L6.25,475.58a21.33,21.33,0,1,0,30.17,30.17L140.77,401.4A275.84,275.84,0,0,0,256,426.67c107.6,0,204.85-61.78,253.81-161.25a21.33,21.33,0,0,0,0-18.83A291,291,0,0,0,409.84,132.33ZM256,362.67a105.78,105.78,0,0,1-58.7-17.8l31.21-31.21A63.29,63.29,0,0,0,256,320a64.07,64.07,0,0,0,64-64,63.28,63.28,0,0,0-6.34-27.49l31.21-31.21A106.45,106.45,0,0,1,256,362.67ZM2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.15,147.11,148.4,85.33,256,85.33a277,277,0,0,1,70.4,9.22l-55.88,55.88A105.9,105.9,0,0,0,150.44,270.52L67.88,353.08A295.2,295.2,0,0,1,2.19,265.42Z"/></svg>
</div>

Answer 2

You have to get svg and input into the same div. And little bit Css magic!

For example,

HTML:

<div class="inputCover">
    <input type="password" class="input">
    <svg class="icon"></svg>
</div>

CSS:

.inputCover{
    position: relative; //so, when do you make parent div position relative, then absolute items inside is not goes outside.
}

.input{
    padding: 5px;
    padding-right: 25px; //you can limit input's inside, so text not goes to under of icon
}

.icon{
   position: absolute; //you can make icon on the input like this.
   top: 50%; //icon will be center of the input from top to bottom.
   right: 10px; //right position.
   transform: translateY(-50%); //this is important to make icon perfectly centered.
}

I think this is the right answer for you.

Answer 3

1. First of all, make sure an id is only used once! (Second svg changed)
2. You can hide and show the desired <svg> onclick
3. Wrap the input and svg's into a container for styling
4. I've moved the onclick to the <svg>

var x = document.getElementById("login-form-password");   // Input
var s = document.getElementById("Layer_1");               // Show pass
var h = document.getElementById("Layer_2");               // Hide pass

function togglePass() {
    if (x.type === "password") {
        x.type = 'text';
        s.style.display = 'none';
        h.style.display = 'inline';
    } else {
        x.type = 'password';
        s.style.display = 'inline';
        h.style.display = 'none';
    }   
}

#inputcontainer {
    display: flex;
}
#inputcontainer > svg {
  margin-left: 5px;
}

<p class="signin_title">Sign in</p>
<input type="text" id="login-form-username" name="os_username"  placeholder="Username" required><br><br>

<div id='inputcontainer'>
  <input type="password" id="login-form-password" name="os_password" placeholder="Password" required></input>

  <svg id="Layer_1" onclick="togglePass()" data-name="Layer 1" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>eye-glyph</title><path d="M320,256a64,64,0,1,1-64-64A64.07,64.07,0,0,1,320,256Zm189.81,9.42C460.86,364.89,363.6,426.67,256,426.67S51.14,364.89,2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.14,147.11,148.4,85.33,256,85.33s204.86,61.78,253.81,161.25A21.33,21.33,0,0,1,509.81,265.42ZM362.67,256A106.67,106.67,0,1,0,256,362.67,106.79,106.79,0,0,0,362.67,256Z"/></svg>
  <svg id="Layer_2" onclick="togglePass()" data-name="Layer 2" width="25" xmlns="http://www.w3.org/2000/svg" style='display: none' viewBox="0 0 512 512"><title>eye-disabled-glyph</title><path d="M409.84,132.33l95.91-95.91A21.33,21.33,0,1,0,475.58,6.25L6.25,475.58a21.33,21.33,0,1,0,30.17,30.17L140.77,401.4A275.84,275.84,0,0,0,256,426.67c107.6,0,204.85-61.78,253.81-161.25a21.33,21.33,0,0,0,0-18.83A291,291,0,0,0,409.84,132.33ZM256,362.67a105.78,105.78,0,0,1-58.7-17.8l31.21-31.21A63.29,63.29,0,0,0,256,320a64.07,64.07,0,0,0,64-64,63.28,63.28,0,0,0-6.34-27.49l31.21-31.21A106.45,106.45,0,0,1,256,362.67ZM2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.15,147.11,148.4,85.33,256,85.33a277,277,0,0,1,70.4,9.22l-55.88,55.88A105.9,105.9,0,0,0,150.44,270.52L67.88,353.08A295.2,295.2,0,0,1,2.19,265.42Z"/></svg>
</div>