20

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.

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Tim Van Dijck
  • 472
  • 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

3 Answers3

49

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
  • 1,015
  • 4
  • 8
  • 11
    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
  • i removed it but instead of that i want use my own icon, but how do i trigger date picker now.. – Pawan Deore Oct 14 '22 at 09:41
  • 1
    @PawanDeore you should try `showPicker()` https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker – 5ulo Oct 28 '22 at 20:52
  • There are several issues with this: 1) it doesn't hide the date icon in Firefox, 2) it leaves a bit of extra white space to the right of the input in Chrome, 3) you don't need to select `input[type="date"]::-webkit-inner-spin-button`, 4) You only need the `display: none`, not anything affecting `appearance`. – Zach Saucier May 10 '23 at 18:54
0
input[type='date']::-webkit-calendar-picker-indicator {background: 
transparent;
bottom: 0;
color: transparent;
cursor: pointer;
height: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
width: auto;
}
sai Ramakrishna
  • 1
  • 1
  • 1
    Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. **Would you kindly [edit] your answer to include additional details for the benefit of the community?** – Jeremy Caney May 25 '23 at 16:33
0

Use below CSS to hide the calender sign from the calender icon from input.

input[type='date']::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
Dhruvil21_04
  • 1,804
  • 2
  • 17
  • 31
Divyansh Mittal
  • 9
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 07 '23 at 11:26