CODEWITHSUNDEEP
cssinputplaceholder
andrelange91
andrelange91

Reputation: 1148

Input field, move text that is being input

To make room for an icon, I have moved the placeholder text 35px to the right of my input; However, when I start to type in the input field, the text starts behind the icon.

I attempted a bit of googling, but i have yet to find an answer. The search results I've seen regard the placeholder, but it is not what I am having troubles with.

How do I move the text which is being inputted, so it matches that of the placeholder? (form-group__input)

.login {
  background-color: $color-white;
  width: 30vw;
  position: absolute;
  @include position-center;
  padding: 20px;
}

.login h2 {
  color: $color-gray;
  font-weight: bold;
}

.login .form-group {
  width: 80%;
  margin: 10px auto;
  position: relative;
}

.login .form-group .form-group__input {
  background: none;
  border: 1px solid gray;
  padding: 10px;
  border-radius: 6px;
  width: 100%;
}

.login .form-group .form-group__input::placeholder {
  padding-left: 35px;
}

.login .form-group__icon {
  position: absolute;
  left: 15px;
  font-size: 22px;
  color: gray;
  top: 6px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<section class="login">
  <h2>Login</h2>
  <div class="form-group">
    <input type="email" placeholder="[email protected]" class="form-group__input">
    <span class="form-group__icon"><i class="far fa-envelope"></i></span>
  </div>
  <div class="form-group">
    <input type="password" placeholder="**********" class="form-group__input">
    <span class="form-group__icon"><i class="fas fa-lock"></i></span>
  </div>
  <a href="Index.html" class="btn btn--blue">Log In</a>
  <a href="CreateAccount.html" class="btn btn--simple">Create Account</a>
</section>

Upvotes: 0

Views: 69

Answers (1)

Manikandan2811
Manikandan2811

Reputation: 841

Plz try this code..

css

.form-group__input {
  padding: 10px 10px 10px 40px;
}

Upvotes: 1

Related Questions