How can style be limited?

Question

css

Sorry for the crooked title. In this template , the fields are very interestingly made. I pressed the field, the label moved up. I was able to implement it. But if I enter something in the field, the label will still return to its place and an overlay is obtained.

In the example at the link of this "artifact" is not. How can I fix this, where to dig? Is it at the css level or is it still on js (I deleted all js in principle and it still worked)?

Answer 1

Sergey Sergey correctly pointed out everything, it is better to define the filled field by the script and set the class, for example, in the same MDL this is done, by the way it went from them. Well, you can also get focus through styles :focus ~ label for example like this, and of course in your case the label must be after the input, or you will not track :focus, :checked and other selectors