<input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" />
input[type="date"]::before {
content: attr(data-placeholder);
width: 100%;
}
/* hide our custom/fake placeholder text when in focus to show the default
* 'mm/dd/yyyy' value and when valid to show the users' date of birth value.
*/
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
http://caniuse.com/#feat=input-datetime
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.