Элемент действует так, как будто он всегда действителен (: действителен)

Question

почему мой ввод всегда остается действительным, даже если ничего не набирается? Вот код

https://codepen.io/VeljkoCukic/pen/eYZYNqL?editors=1100

    #inp:focus + #labela #sp,
#inp:valid + #labela #sp{
  transform:translateY(-150%);
  font-size:14px;
  color: blue; }

Answer 1

Тем временем выяснил, что случилось. Элемент ввода должен иметь атрибут «required» , поэтому он не всегда будет действительным

<input type="text" id="inp" required />