CodePen: не работают стили :focus и :valid ~ label для textarea, работают для input?

Question

[YarikLtv4k]

https://codepen.io/sldkfjwelkgmerbgki/pen/MWQPjbN

Добавил в код textarea и хочу, чтобы для него, как и для input, убирался текст вверх и менял цвет. Но, когда я нажимаю на другое поле, когда уже ввел текст, он становится обратно.
.login-box .user-box textarea:valid ~ label -- просто блокирует текст в конечной точке и не возвращает его обратно.

Как сделать такой же эффект, как у input?

Comments

[Ankhena]

Т.е. вы серьезно не видите различия вот этих селекторов для инпута и для textarea?

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label,
.login-box .user-box textarea:focus ~ label
{}

Кстати, разумнее использовать :not и :placeholder-shown, чем :valid

[YarikLtv4k]

Ankhena, Скажите пожалуйста, как сделать так, как я хочу?

[Ankhena]

YarikLtv4k, видите для инпута два селектора, а для текстареа только один? Так должны быть оба.

[Ankhena]

YarikLtv4k, https://codepen.io/AnnaSummer/pen/xxYygyK

[YarikLtv4k]

Ankhena, Спасибо большое!