Question Details

No question body available.

Tags

javascript html css date

Answers (3)

Accepted Answer Available
Accepted Answer
February 27, 2026 Score: 1 Rep: 414 Quality: Medium Completeness: 70%

Building on Kartiks answer, you can do this to get rid of the remaining space in Chrome and Edge:

input[type="date"]:disabled::-webkit-calendar-picker-indicator {
  display: none;
}
input[type="date"]:disabled::-webkit-datetime-edit {
  display: contents;
}

February 27, 2026 Score: 2 Rep: 10,014 Quality: Low Completeness: 40%

You can override the built-in ui via css and hide the calendar

input[type="date"]:disabled::-webkit-calendar-picker-indicator {
    display: none;
}
input[type="date"]:disabled {
    padding-right: 0;
}

Separately you can also cap the element's width to cap at content length by doing

.input[type="date"] {
  width: fit-content;
}
February 27, 2026 Score: 1 Rep: 31 Quality: Low Completeness: 50%

You can hide both the calendar icon and the reserved space (Chromium browsers) like this:

input[type="date"]:disabled::-webkit-calendar-picker-indicator {
  display: none;
}
input[type="date"]:disabled {
  padding-right: 0;
  width: fit-content;
}