скрытие текста в css при заполнении поля ввода html не работает - PullRequest
Новая
       67

скрытие текста в css при заполнении поля ввода html не работает

0 голосов
/ 10 января 2020

У меня есть поле ввода в html, как показано ниже, и оно работает нормально: 

.lolan:placeholder-shown+.form__label {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
}
<input class="lolan" type="text" id="name" placeholder="Full Name" required />
<label for="name" class="form__label">Click "Download" To Get Your Card</label>

, когда пользователь печатает текст, будет отображаться метка. Теперь я добавляю еще одну метку над полем ввода s, которая будет отображаться до заполнения поля ввода и скрываться после заполнения поля ввода. Я сделал следующий код: 

.lolan:placeholder-shown - .form__labell {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
}
<label for="name" class="form__labell">Click "Download" To Get Your Card</label>
<input class="lolan" type="text" id="name" placeholder="Full Name" required />

это не работает, может кто-нибудь, пожалуйста, скажите мне, что здесь не так

1 Ответ

1 голос
/ 10 января 2020

соседний братский комбинатор равен +, а общий братский комбинатор - ~: ранее не существовало соседний братский комбинатор, такой как -

Вы можете сохранить порядок элементов в разметке как в первом примере, но обращая их вспять, используя flexbox и order свойство 

div {
 display: flex;
}

input { order: 2 }
label { order: 1 }

input:not(:placeholder-shown) + label {
   opacity: 0;
   visibility: hidden;
   -webkit-transform: translateY(-4rem);
   transform: translateY(-4rem);
}
<div>
  <input class="lolan" type="text" id="name" placeholder="Full Name" required />
  <label for="name" class="form__labell">Click "Download" To Get Your Card</label>
</div>
...