How can prevent that when

1

How can prevent that when use input with label and set type email when form is not valid like write a text “asd123” in email type form and this is not valid to zoom out default value the label with text what me writed and the label name is same place unreadable?

Thanks

2

Help me please :D? No one?

3

For validating any kind of inputs read this

4

Do you have any idea for this

input:invalid {
border: 2px dashed red;
}

input:valid {
border: 2px solid black;
}

The :invalid property apply on page load? But the :valid after form validated? How can do that first a user write something and after that do the :invalid not on page load? Like on :valid?

5

Can you share the link to your codepen to take a look, see all the code and to be able to refer to the same code as you?

6
7

As soon as you start typing into the field you get the :invalid state that will change as soon as the validation criteria meets then it is applied the css code for css:valid

8

I have used label tag with input and when :focus apply and :valid is fine stay above the top: -10px; the label. But when is invalid then the text move back top: 0; and this way 2 text same times is unreadable. How can prevent this? without JS?

9

In your example <input id="choose" name="i_like" required> the validation is just “required” so the initial state(when the value of the input is empty) it will trigger the :invalid css attribute. as soon as you start typing in the value is no more empty and is triggered the :valid css atribute. you can see the border is changing.

In the codepen example you have provided i don’t see any movement of the label for. When you are using label for="" when you click the label it moves automatically the focus to the related input

10

Sorry. I think i misunderstood your question. Do you want your input field be styled the same way ether it is valid or not when the page loads and as soon as you start typing in to start the validation in terms of css styling?