You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If you change input type to anything but text, and of course you should for email, url, tel (...) for accessibility (and to prompt the proper keyboard) the browser will have default validations checks for those types which means that the use of :invalid pseudo-selector won't work when the user actually enters invalid content. By this I mean that If, for example, the user inserts an invalid email and tab or focus the next field, the label will overlap the content.
You also have type="password" example, but that only works because there's not a pattern for the password so a 1 character long password will be considered valid, but of course this is not a real usecase.
If a validation pattern exists, which is mandatory in real sites, even if you use input[type="text"] for every field and user don't match it, the label will overlap the content.
In the future there will be a proper solution using the :placeholder-shownpseudo selector, but its support is really bad (chrome only) at the time of writing.
Nice repo btw 👏 I gave a workshop for beginners on this a few months ago.. it was supposed to be turned into a repo of components like yours, you can check it for some magic :target solutions as well! (sry for the bad code organization, it was the result of a live coding workshop).
Cheers!
The text was updated successfully, but these errors were encountered:
This demo works without the :invalid selector and instead with the :placeholder-shown like you mentioned - and the author mentioned he would like his project on here, too. -- But I don't know if/how his version handles validation, whereas your example has it built in. Neat :)
And support has gotten better (Firefox, etc.) - except of course IE and edge...
So maybe one or both of you should add your version to the list.
hey guys I am really new to this platform and I didnt get the problem clearly ,Can someone please elaborate I just now completed my full stack web development....And I really want to contribute to this , Thank you
If you change input type to anything but
text
, and of course you should foremail, url, tel (...)
for accessibility (and to prompt the proper keyboard) the browser will have default validations checks for those types which means that the use of:invalid
pseudo-selector won't work when the user actually enters invalid content. By this I mean that If, for example, the user inserts an invalid email and tab or focus the next field, the label will overlap the content.You also have
type="password"
example, but that only works because there's not apattern
for the password so a 1 character long password will be considered valid, but of course this is not a real usecase.If a validation pattern exists, which is mandatory in real sites, even if you use
input[type="text"]
for every field and user don't match it, the label will overlap the content.Example fail usecases
CSS4
In the future there will be a proper solution using the
:placeholder-shown
pseudo selector, but its support is really bad (chrome only) at the time of writing.CSS4 Example
Nice repo btw 👏 I gave a workshop for beginners on this a few months ago.. it was supposed to be turned into a repo of components like yours, you can check it for some magic
:target
solutions as well! (sry for the bad code organization, it was the result of a live coding workshop).Cheers!
The text was updated successfully, but these errors were encountered: