One of those nifty things Google did with the Material Design guidelines is include floating labels. Don't know what a floating label is? Check it ...
For further actions, you may consider blocking this person and/or reporting abuse
You're correct about the lack of CodePen tag, will try to get it up soon.
I believe there is a way to get around the
requiredrequirement.Use
.form-control:not(:placeholder-shown) + .form-control-placeholder.On another note,
:pseudo + .siblingdoesn't work in IE or Edge.Since writing this, I have learned a lot about the
:placeholder-shownpseudo-class. Thanks!...and placeholder-shown is experimental and does not work with IE or Edge.
developer.mozilla.org/en-US/docs/W...
It gets worse.
IE has
:-ms-input-placeholderas a selector for:placeholder-shownand Edge does not.Whereas Edge has
::-ms-input-placeholderas an element for::placeholderand IE does not.Shoop 👌🏻
A small drawback is that you now can't use the form constraints API anymore to validate in the front-end.
Well done dude! This is perfect for what I was after!
This doesn't work for me.