Remove background arrow from date input in Google Chrome v20

Since Google Chrome v20 a new calendar has been added to date inputs. The issue with this is that I'm using javascript to create my own calendar and I have an icon already in the same position as the default chrome arrow.

I was wondering how can I remove the arrow background?

Solution 1:

As far as I know you can't disable it at the moment. There is a discussion going on here: https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec

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

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

EDIT:

As per Jeremy's answer, it is now possible to remove the arrow and spin buttons. Details can be found on webkit.org: Styling Form Controls - WebKit

The CSS to hide the controls is:

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

.unstyled::-webkit-inner-spin-button,
.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 webkit.org page:

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

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

You can see it working in this jsfiddle.

Solution 2:

As of this writing, webkit has introduced controls to handle this:

input[type="date"]::-webkit-calendar-picker-indicator{
    /* Your CSS here */
}
input[type="date"]::-webkit-inner-spin-button {
    /* Your CSS here */
}

So, for this particular issue, it would be:

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button{
    display: none;
}

Solution 3:

adding to @jfrej: (cannot comment at the moment)

To kill all effects chrome applies to the input You need to clear the "x" (clear) Button too. ::-webkit-clear-button

To prevent the showing of the default text. Which is not a placeholder or a value you can use ::-webkit-datetime-edit-fields-wrapper But be carefull, you cannot see the value anymore.

.unstyled::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}



#dateInput:not([value])::-webkit-datetime-edit-fields-wrapper,
#dateInput[value=""]::-webkit-datetime-edit-fields-wrapper { 
    visibility: hidden;
}

http://fiddle.jshell.net/RgY3t/66/