Placeholder hack for input[type="date"] element

<input type="date" name="dob" placeholder="Date of birth" required aria-required="true" /> input[type="date"]::before { content: attr(placeholder); width: 100%; } /* hide our custom/fake placeholder text when in focus to show the default * 'mm/dd/yyyy' text and when valid to show the users' date of birth. */ input[type="date"]:focus::before, input[type="date"]:valid::before { display: none }
There's no way to have placeholder text on input date elements, so here's a hack for it!

3 Responses

Multi-browser ?...
@Carlos Augusto Well... browser support for input type="date" itself is not that great yet :)
http://caniuse.com/#feat=input-datetime
Yes, I ask about that because usually inputs tags don't accept pseudo elements like 'before' e 'after'.

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.