Design Inputbox and label


#1

Hello . How can my friends change my css, which would require requierd to be deleted for input? If I do not ask, I can not understand the input design.
image

this is my css

image

I want this design for my inputbox but I must use required in input tag
image

so If I delete required from my tag , I have below design
image


#2

The css :valid pseudo class only works if the required attribute is present. It’s that :valid rule that slides the label out of the way once text is entered. (:focus will slide it out of the way but once you go to the next input it would slide back over the input if the :valid rule wasn’t present.)

If you want to mimic that behaviour without using the required attribute then you would need to supplement that behaviour with JS and add/remove a class to the input when text had been entered/cleared and change instances of the :valid rule css to use the new class you added.

You can’t have the sliding away action unless you use the required attribute or by implementing with JS