input: not (: показывается заполнитель) ~ селектор меток не работает с автозаполнением - PullRequest
Новая
       39

input: not (: показывается заполнитель) ~ селектор меток не работает с автозаполнением

3 голосов
/ 30 марта 2019

У меня есть плавающий заполнитель в поле ввода.

Заполнитель появится в центре, когда мы не введем значение.как показано на снимке экрана ниже (адрес электронной почты и пароль заполнены).

enter image description here

Теперь, когда вы указываете значение для электронной почты, оно выглядит следующим образом.Обозреватель E-mail и пароль были восстановлены, когда было предоставлено значение

enter image description here

Проблема возникает, когда браузер начинает автозаполнение / автозаполнение этого значения изсохраненные учетные данные при загрузке страницы, такие как имя пользователя, адрес электронной почты, пароль и т. д.см. снимок экрана ниже:

enter image description here

css 

:root {
  --input-padding-x: .75rem;
  --input-padding-y: .75rem;
}

html,
body {
  height: 100%;
}

.form-signin {
  width: 100%;
  max-width: 600px;
  padding: 15px;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 40px;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}

HTML 

<form class="form-signin">
    <h1 class="h3 mb-3 font-weight-normal">Please Type new password</h1>
    <div class="form-label-group">
        <input type="text" id="inputEmail" [(ngModel)]="email" name="email" class="form-control" placeholder="Email" required=""
            autofocus="">
        <label for="inputEmail">Email</label>
    </div>

    <div class="form-label-group">
        <input type="password" id="inputPassword" [(ngModel)]="password" name="password" class="form-control" placeholder="Password"
            required="">
        <label for="inputPassword">Password</label>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <button class="btn btn-lg btn-primary btn-block" (click)="onSubmit()" type="button">Change password</button>
      </div>
    </div>
</form>

Я уже пытался автоматически сфокусироваться на поле электронной почты, но это не сработало.Я также попытался щелкнуть элемент из кода после загрузки страницы, но безуспешно.Пожалуйста, помогите мне, как мне это исправить.

Ответы [ 2 ]

1 голос
/ 25 апреля 2019

у меня работает 

.form-label-group input:-webkit-autofill ~ label {
        /* CSS property  */
}

можете попробовать

0 голосов
/ 19 июня 2019

У меня была такая же проблема. В моей форме я использую следующие селекторы, чтобы убрать текст с метки в любом из этих трех условий:

  1. :focus (поэтому курсор не находится в пути при фокусировке)
  2. :not(:placeholder-shown) (с указанием "вход не пустой")
  3. :-webkit-autofill (потому что 2 не запускался при обновлении / автозаполнении страницы)

Комбинация SCSS: 

input {
  &:focus, &:not(:placeholder-shown), &:-webkit-autofill {
    &+label { /* Move your label */ }
  }
}

(Обратите внимание, что вам также нужно placeholder=" " на вашем входе.)

Вот живой пример: https://codepen.io/jeffward/pen/ZdBxXd

...