Поле ввода, переместить текст, который вводится - PullRequest
Новая
       25

Поле ввода, переместить текст, который вводится

0 голосов
/ 05 ноября 2019

Чтобы освободить место для значка, я переместил текст заполнителя 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>

1 Ответ

1 голос
/ 05 ноября 2019

Плз попробуйте этот код ..

css 

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