От чего зависит :valid в css?

Question

[rootnoroot]

делаю форму по примеру, только форма на wordpress
и у меня в ней поля сразу принимают параметр valid
что за фигня?

.user-box input:focus ~ label,
.user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

Answer 1

[Rsa97]

RTFM

The :valid CSS pseudo-class represents any or other element whose contents validate successfully.

А дальше читаете по ссылке про валидацию полей в зависимости от типа и атрибутов.
Конкретно в вашем случае текстовое поле без дополнительных атрибутов. Оно будет валидным при любом значении, в том числе и при пустой строке.

Comments

[rootnoroot]

Спасибо

как же в моем случаи быть?
в wordpress другая валидация и required вставить никак

[Rsa97]

rootnoroot, Значит изучать, как работает валидация в Wordpress. Тут я вам ничем не помогу.

[Rsa97]

rootnoroot, Да, если вы хотите просто знать, что в поле что-то введено, то можно использовать атрибут placeholder и свойство :placeholder-shown.

Answer 2

[Надим]

Во первых, нет атрибута required, который отвечает за обязательность заполнения поля.
Во вторых, нет атрибута pattern который отвечает за валидацию значения по регулярному выражению.