Bradley Taunt

You should be using date and time inputs

By doing the following, you instantly add support for date and time pickers on all (well mostly all) devices and operating systems:

See the Pen Default date/time input types (placeholder visible) by Bradley Taunt (@bradleytaunt) on CodePen.

One small caveat

The one issue you may notice with this approach is that the input placeholder attributes are no longer visible. This is sad indeed. Thankfully there is a workaround!

h3 { margin-left: 10px; }

input {
    color: transparent;
    display: block;
    margin: 10px;
    padding: 10px;

input:invalid:before {
    color: grey;
    content: attr(placeholder);
    padding-left: 10px;
    pointer-events: none;
    position: absolute;
    left: 20px;

input:valid, input:focus, input:active {
    color: black;

input:before {
    display: none;