Chrome has apparently added a dropdown arrow to text inputs that reference a . It\'s appearing in Chrome 34 (Canary) but not in the current stable b
try -webkit-appearance: none
that should remove the default styles
Thanks to the comment by alexander farkas, here is the style rule to remove the arrow:
input::-webkit-calendar-picker-indicator {
display: none;
}
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
Also removed the arrow for me and I found created a better clicking experience to still click where the arrow would be, you can even increase the the width and height of it > 1em and in the input maybe put a custom arrow as a background image, where the arrow would be.
Thanks to Cantera. I didn't want to get rid of the black arrow entirely, just the gray square surrounding it.
input::-webkit-calendar-picker-indicator {
background-color: inherit;
}
As others have mentioned ::-webkit-calendar-picker-indicator { display: none }
works at removing the arrow it would also impact the html5 datepicker on a <input type="date">
,
[list]::-webkit-calendar-picker-indicator {
display: none;
}