Ввод электронной почты не работает с действительным селектором - PullRequest
Новая
       13

Ввод электронной почты не работает с действительным селектором

0 голосов
/ 06 марта 2020

когда я устанавливаю тип ввода для электронной почты, я не могу использовать действительный селектор для него в css, и когда я изменяю тип на текст, он отлично работает 

.span-name{
display:block;
}

input:focus ~ .span-name,
input:valid ~ .span-name{
    transform: translateY(-100%);
}
<input type="email" name = "email_config" required >
<span class = "span-name">Email Configuration</span>

1 Ответ

2 голосов
/ 06 марта 2020

Ваш перевод не делает ничего полезного, потому что преобразование не работает на встроенных элементах , но оно применяется. Здесь я также применил фиолетовый цвет, когда он действителен, и вы можете видеть, что он работает как положено. Я также применил display: inline-block, который позволит переводчику делать то, что, я подозреваю, вы хотите, чтобы он делал. Я также изменил селектор брата на следующий селектор брата, чтобы я мог повторно использовать этот стиль как для электронной почты, так и для текстовой конфигурации. 

input:focus+.span-name,
input:valid+.span-name {
  transform: translateY(-100%);
  color: purple;
  display: inline-block;
}
<input type="email" name="email_config" required>
<span class="span-name">Email Configuration</span>
<br>
<input type="text" name="email_config" required>
<span class="span-name">Text Configuration</span>
...