HTML5 date input custom style

by Adriano Monecchi

HTML

<input type="date" required="required">

CSS

/* Hide the clear button from date input */
input[type="date"]::-webkit-clear-button {
    -webkit-appearance: none;
    display: none;
}

/* Hide the spin button from date input */
input[type="date"]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    display: none;
}

/* Styles the drop-down indicator */
input[type="date"]::-webkit-calendar-picker-indicator {
    color: #2c3e50;
}

/* A few custom styles for date inputs */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    color: #95a5a6;
    font-family: "Helvetica", arial, sans-serif;
    font-size: 18px;
    border:1px solid #ecf0f1;
    background:#ecf0f1;
    padding:5px;
}

input[type="date"], focus {
    color: #95a5a6;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}