I believe there is a way to get around the required requirement. Use .form-control:not(:placeholder-shown) + .form-control-placeholder.
required
.form-control:not(:placeholder-shown) + .form-control-placeholder
On another note, :pseudo + .sibling doesn't work in IE or Edge.
:pseudo + .sibling
Since writing this, I have learned a lot about the :placeholder-shown pseudo-class. Thanks!
:placeholder-shown
...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-placeholder as a selector for :placeholder-shown and Edge does not.
:-ms-input-placeholder
Whereas Edge has ::-ms-input-placeholder as an element for ::placeholder and IE does not.
::-ms-input-placeholder
::placeholder
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.