How to get rid of x and up/down arrow elements of a input date?

Use the pseudo-class -webkit-inner-spin-button to style it specific for webkit-based browsers:

http://jsfiddle.net/5M2PD/2/

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

If you want to change the style of the dropdown arrow, use the pseudo-class -webkit-calendar-picker-indicator:

input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

To eliminate the clear button, set the input to required:

http://jsfiddle.net/5M2PD/3/

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

Leave a Comment