https://codepen.io/shoumiksk/pen/bGoVdgE

here is the codepen link of what i want to achieve, plus i dont want the heading to slide down when there is some text in the input field. Now when i use valid like this the heading animation stops

.inputdiv input:valid   .content .contenttext {}

Is there any other way to do it?

ignore mis-alignment of the input field, that's according to my ui

CodePudding user response：

You can use the pseudo selector :placeholder-shown for that. But then you have to define a placeholder, in your case ist a whitespace placeholder=" ".

Result: https://codepen.io/yourbraineatsyou/pen/XWeZogq

More info: https://css-tricks.com/almanac/selectors/p/placeholder-shown/