Remove background arrow from date input in Google Chrome v20

Question

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

Answer 1

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/