Remove Html5 input date selection color in the input box

Screenshot
Is any way to remove the color from the input (please find the attachment)

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  margin-right: 2px;
  opacity: 0.6;
  filter: invert(0.8);
  background: transparent;
  color: transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  margin: auto;
  z-index: 20;
}

input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-text {
  color: transparent;
}

input[type="date"] {
 background: transparent;
 color: transparent;
 appearance: none;
 outline: none;
}

input[type="date"]:focus, input[type="date"]:active, input[type="date"]:focus-visible, input[type="date"]::selection{
 background: transparent;
 color: transparent;
 appearance: none;
 outline: none;
}

This is what currently what we have
Thanks!

We don’t want to show that selection in inputbox type date

>Solution :

input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-text:focus {
  color: transparent;
  background: transparent;
}

Leave a Reply