1

I want to add a "view password" icon inside of an html input. To do that, I added the material icons font and used one of its components. I nested it inside of the input to allow me to position it according to the input. I set the positon property of the input as "relative" and the position property of the icon as "absolute," but somehow, it still positions absolutely relative to the whole page. How can i fix this?

.auth-input {
    text-align: left;
    padding: 7px 10px;
    background-color: #f6f6f6;
    border: none;
    border-radius: 5px;
    font-size: 1.05em;
    width: 100%;
    position: relative;
}

i.material-icons {
    position: absolute;
    top: 0
}
<input type="password" name="password" id="password-input" class="auth-input">
      <i class="material-icons">visibility</i>
</input>

1
  • input has no closing tag , it cannot hold any tags.
    – G-Cyrillus
    Commented Aug 31, 2020 at 16:22

3 Answers 3

4

You cannot have html inside an input. It is a self closing tag. You need to put both elements into a container.

.auth-input {
  text-align: left;
  padding: 7px 10px;
  background-color: #f6f6f6;
  border: none;
  border-radius: 5px;
  font-size: 1.05em;
  width: 100%;
  position: relative;
}
.auth-input input {
  width: 100%;
}

i.material-icons {
  position: absolute;
  top: 0
}
<div class="auth-input">
  <i class="material-icons">visibility</i>
  <input type="password" name="password" id="password-input" />
</div>

3

Wrap the two. See demo https://codepen.io/yifanai/pen/MWyvJRE

.password-input-group {
    position: relative;
}
.auth-input {
    text-align: left;
    padding: 7px 10px;
    background-color: #f6f6f6;
    border: none;
    border-radius: 5px;
    font-size: 1.05em;
    width: 100%;
    position: relative;
}

i.material-icons {
    position: absolute;
    top: 7px;
    right: 10px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel=" stylesheet">
<div class="password-input-group">
    <input type="password" name="password" id="password-input" class="auth-input" />
    <i class="material-icons">visibility</i>
</div>

Result

2

.auth-input {
    text-align: left;
    padding: 7px 10px;
    background-color: #f6f6f6;
    border: none;
    border-radius: 5px;
    font-size: 1.05em;
    width: 100%;
}
.layout {
    position: relative;
}
i.material-icons {
    position: absolute;
    top: 0;
    right: 20px;
    z-index: 1;
}
<span class="layout">
    <input type="password" name="password" id="password-input" class="auth-input"></input>
    <i class="material-icons">visibility</i>
</span>

Input TAG not have child, try it.

1
  • For me, it still goes to the end of the page Commented Aug 31, 2020 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.