13

Does anyone know how to hide the calendar icon on a date field in Chrome? (input[type="date])

When I look it up I find that I should use "::-webkit-calendar-picker-indicator" but that doesn't seem to do the trick anymore...

Tim Van Dijck
  • 403
  • 1
  • 4
  • 13
  • Don't be put off by the question title I've linked to_ as well as the reference to `::-webkit-calendar-picker-indicator` there are some comments on this SO question that might prove useful _ >>> https://stackoverflow.com/questions/15530850/method-to-show-native-datepicker-in-chrome – inputforcolor Sep 11 '19 at 16:00

1 Answers1

33

Try something like this

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
<input type="date" class="date-input">
Vitor Avanço
  • 849
  • 3
  • 8
  • 7
    You can also add to it setting the opacity to ```opacity: 0```. That way, the icon will be hidden in chrome based browsers while still retaining the functionality to show the date picker when users click on the location where the icon is ought to be. – Lamin Barrow Mar 17 '21 at 15:05