Float label in css

[amirghaffari1]

Hello everybody;
in my project I have two kinds of inputs. Some of them are required and some of them not. I want when user focus on input, style of the label change. I use this code:

.group input:focus ~ label, .group input:valid ~ label {
top: -20px;
font-size: 14px;
color: #7B53C1;
}

the problem is for the inputs that are NOT required, by default they are valid (because they are not required and when they are empty, they are valid!) but the inputs are empty. I want for both type of inputs when the page load they get the main style and when focus or get value, the style change. How can I do it by pseudo classes for optional inputs?

[Gandalf]

I realise this doesn’t answer your question, but I have to say I find the :valid pseudo-class rather iffy. Firefox seems to think me@gmail is a valid email address.