Remove background arrow from date input in Google Chrome v20

As far as I know you can’t disable it at the moment.
There is a discussion going on here:

Perhaps they will add some -webkit selectors to control the styling.

For now you might have to use <input type="text"> instead.


As per Jeremy’s answer, it is now possible to remove the arrow and spin buttons. Details can be found on Styling Form Controls – WebKit

The CSS to hide the controls is:

<input type="date" class="unstyled" />

.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;

However, this will only hide and not disable the native calendar! – you can still activate the calendar by pressing Alt+Down Arrow (at least on Windows).

To disable, you need to add a little JavaScript as described on the above page:

<input type="date" id="dateInput" class="unstyled" />

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
}, false);

You can see it working in this jsfiddle.

Leave a Comment