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;
}

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

1 个答案: