I have this following code.

<div class="login-password">
              <label for="password" class="form-label"
                >Enter your password</label
              >
              <input
                id="loginPassword"
                type="password"
                class="form-control"
                placeholder="Enter your password"
              />
              <i
                class="bi bi-eye-slash"
                id="togglePassword"
                style="margin-left: -30px; cursor: pointer"
              ></i>
</div>

When I do this the password visibility icon is placed as in the image given below.

How do I place the visibility icon within password field.

I have this following code.

<div class="login-password">
              <label for="password" class="form-label"
                >Enter your password</label
              >
              <input
                id="loginPassword"
                type="password"
                class="form-control"
                placeholder="Enter your password"
              />
              <i
                class="bi bi-eye-slash"
                id="togglePassword"
                style="margin-left: -30px; cursor: pointer"
              ></i>
</div>

When I do this the password visibility icon is placed as in the image given below.

How do I place the visibility icon within password field.

• javascript
• html
• passwords
• toggle

Share Improve this question Follow asked Nov 10, 2021 at 4:29 joekevinrayan96joekevinrayan96 6441111 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Using marketwatch.'s login as an example, you would have to make the css property 'position' to "absolute" for the <i> tag. This will allow you to place it inside the input box. Perhaps something like this:

.bi-eye-slash {
    width: 25px;
    height: 25px;
    position: absolute;
    z-index: 200;
    top: 28px;
    right: 10px;
    cursor: pointer;
}

I found the answer to my own question. Well, we have to group the input and the icon is the way to do it, and below is the code.

.input-group-addon i {
    margin-left: -30px;
    cursor: pointer;
    z-index: 200;
    position: absolute;
    font-size: large;
    color: #6c757d;
  }
 <link
  rel="stylesheet"
  href="https://cdn.jsdelivr/npm/[email protected]/font/bootstrap-icons.css"
/>

<div class="login-password">
                  <label for="password" class="form-label"
                    >Enter your password</label
                  >
                  <div class="input-group">
                    <input
                      id="loginPassword"
                      type="password"
                      class="form-control"
                      placeholder="Enter your password"
                    />
                    <div class="input-group-addon">
                      <i class="bi bi-eye-slash" id="togglePassword"></i>
                    </div>
                  </div>
                </div>