Hide the calendar icon in Google Chrome

Question

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.

Meilen

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 _ >>> #15531350 – Falsehood

Answer 1

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">

Ras

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. – Kwangju

i removed it but instead of that i want use my own icon, but how do i trigger date picker now.. – Blockhouse

@PawanDeore you should try showPicker() developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/… – Daman

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. – Forbade

Doesnt work anymore. (Firefox) – Hedgehop

@Hedgehop added solution for firefox below https://mcmap.net/q/526350/-hide-the-calendar-icon-in-google-chrome – Intendancy

Answer 2

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;
}

Briard

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. – Interstitial

Answer 3

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;
}

Simmons

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? – Mete

Answer 4

While trying to figure this out easiest solution that I could find of is

input[type="date"]::-webkit-calendar-picker-indicator {
    content: url('./assets/calendarv1.svg');
  }
input[type="time"]::-webkit-calendar-picker-indicator {
    content: url('./assets/clock-icon.svg');
  }

but the problem with this is If your icon is like png I am if it has cutout. the default icon would also be visible like this image with 2 icons

here the solution is you can fill your icon's background with the same color as your input box background color

fixed icons

Tuberculous

Answer 5

Method to hide the native datepicker icon which works in Chrome and Firefox.

Chrome

The native ::-webkit-calendar-picker-indicator is used

Non webkit Browser like Firefox

I simply added an after element on the wrapper as an overlay to hide the native icon. This overlay is not used on chrome.

.date-input-wrapper {
  width: fit-content;
}

input {
  width: 100%;
}

input[type=date]::-webkit-calendar-picker-indicator {
  visibility: hidden;
}

.date-input-wrapper {
  position: relative;
}

.date-input-wrapper::after {
  display: none;
  width: 17px;
  height: 16px;
  background: red;
  /* background: white; */
  position: absolute;
  content: "";
  right: 0px;
  top: 2px;
}

@supports not selector(::-webkit-calendar-picker-indicator) {
  .date-input-wrapper::before {
    display: block;
  }
}

<div class="date-input-wrapper">
  <input type="date">
</div>

Intendancy

This does not seem to work any more? atleast in firefox 126.0 – Hangeron