输入字段，移动正在输入的文本

Question

为了给图标腾出空间，我将占位符文本35px 移到了input 的右侧；但是，当我开始在 input 字段中输入时，文本开始在图标后面。

我尝试了一些谷歌搜索，但我还没有找到答案。我看到的搜索结果与占位符有关，但这不是我遇到的问题。

如何移动正在输入的文本，使其与占位符匹配？ (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="someemail@email.com" 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>

Answer 1

请试试这个代码..

css

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