CSS: анимация селекторов перестает работать правильно после удаления «обязательного» тега из поля ввода - PullRequest
Новая
       26

CSS: анимация селекторов перестает работать правильно после удаления «обязательного» тега из поля ввода

0 голосов
/ 26 сентября 2019

У меня есть следующий код, который перемещает метку из поля ввода, как только ввод сфокусирован или действителен.

.form-control-placeholder {
  font-family: "Zuric Light";
  color: black;
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: .5;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  padding: 0;
  transform: translate3d(0, -100px, 0);
  opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <input type="text" id="address2" class="form-control" name="address2" required>
    <label class="form-control-placeholder" for="address2">Address line 2</label>
</div>

Как видите, атрибут required применяется к полю input.Но как только я его удаляю, он перестает работать правильно из-за селектора :valid.Без атрибута required он будет действителен все время.

Как мне решить эту проблему и можно ли это сделать только с помощью CSS?

1 Ответ

4 голосов
/ 26 сентября 2019

:valid работает, только если input имеет атрибут required.Другой способ добиться этого - использовать :placeholder-shown Псевдокласс.

Этот псевдокласс выбирает все input и textarea, которые в настоящее время отображают заполнитель текста .Для работы элемент ввода должен иметь атрибут placeholder.

Согласно MDN , MS Edge не будет поддерживать это.

В этом случае вы хотите, чтобы значение label увеличивалось только тогда, когда вход сфокусирован или содержит какое-либо значение.Поэтому вам нужно использовать :not(:placeholder-shown) вместо :placeholder-shown.В противном случае это приведет к обратному эффекту. 

div{
position: absolute;
width:100%;
top:50px;
}
.form-control-placeholder {
  font-family: "Zuric Light";
  color: black;
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: .5;
}

.form-control:focus+.form-control-placeholder,
.form-control:not(:placeholder-shown)+.form-control-placeholder {
  padding: 0;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}
<div class="form-group">
  <input type="text" id="address2" class="form-control" ngModel name="address2" placeholder="...">
  <label class="form-control-placeholder" for="address2">Address line 2</label>
</div>
...