Как отобразить элементы html только если значение поля после ввода пользователя удовлетворяет условие (без JS)

Подскажите есть ли возможность отобразить элементы на html странице идущие после формы только если введенные данные соответствуют условию? В противном случае будет толко вывод фразы "Wrong input" с помощью CSS.


Ответы (1 шт):

Автор решения: Andrey Fedorov

.true,
.false {
  display: none;
  font-weight: 600;
}

input:valid~.true {
  display: block;
  color: green;
}

input:invalid~.false {
  display: block;
  color: red;
}

input:placeholder-shown~.true {
  display: none;
}
<span>введите несколько цифр:&nbsp;</span>
<input type="text" placeholder="" pattern="\d{1,}">
<div class="true">True</div>
<div class="false">False</div>

→ Ссылка