With Google Chrome 20 released last week, those who use the browser were treated with a little indicator on a date input. This indicator, when clicked, would show a calendar hovering under the input. This is a welcomed addition to Chrome and Webkit. When Safari will include this time will tell. For me, this was a bit of a shock at work because we already had a javascript-based date picker and Chrome was showing two. Delving into the Webkit source code I discovered that this little widget can be styled and even disabled via CSS.

If, like me, you need to disable the calendar indicator you can simple hide the pesky arrow with a sprinkle of CSS.

::-webkit-calendar-picker-indicator {
  display: none;
}

And voila, gone!

After solving my work related issue with the new date picker for Chrome I became curious how much I could style this bad boy and was pretty impressed with the results:

You can also play with the dabblet (Webkit only)