Question 161273 in Html Question posted in
Some basic documentation can be found here.

Does HTML-CSS Translate not work?

I need my eye-icon to be centered with my login form input. However, my Top 50% and translate properties seem to be applied on the main field class rather than inside the input. So, the icon is not aligned within the input field.

.form .field {
  position: relative;
  height: 70px;
  width: 100%;
  margin-top: 24px;
  border-radius: 3px;
}

.field input, .field button {
  height: 70%;
  width: 100%;
  border: none;
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
}

.field input {
  outline: none;
  padding: 0 15px;
  border: 1px solid#CACACA;
}

.eye-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #8b8b8b;
  cursor: pointer;
  padding: 5px;
}
<div class="field input-field">
  <label for="login-pwd">Password</label>
  <input type="password" name="password" class="form-control" placeholder="Password" id="login-pwd" required="">
  <i class="bx bx-hide eye-icon" id="toggle-password"></i>
</div>

can someone help me to resolve this issue ? I want my icon to be centered inside my input type password.

Tags:

2

Answers


  1. 0

    You need to give the parent element position: relative;

    .input-field {
 position: relative;
}
    Login or Signup to reply.
  2. 0

    Your first css rule, which is the position reference for the absolutely positioned icon (having position: relative), has this selector: .form .field {...}.

    However, "form" is not a class, but an element/tag, so the selector should be form .field {...}, without the dot before "form"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search