问题：
我有一个
<input type="date"/>
元素，看起来是这样的：

普通日期选择器

如你所见，有一个用于选择日期的“日历”图标。

但当我将日期字段禁用时：
<input type="date" disabled/>

看起来像这样：

日历图标位置变成空白区域

如你所见，日历图标没了，但原来在那里的却是一个空白区域，我觉得这个空白看起来有点难看，想把它去掉。

我尝试过：
我尝试用 <input type="date" disabled style="width:90px"/> 强制让输入框变小，
但那样看起来会变得非常怪，因为看不见的日历图标会遮挡mm/dd/yyyy文本，如下所示。

mm/dd/yyyy部分被遮挡

另外一个想法是用一个容器元素，设定overflow=hidden来“裁剪”掉空白区域，但那会搞乱输入的边框，进而让选中与未选中状态变得复杂。

有没有办法在禁用时让输入元素的宽度正好与mm/dd/yyyy的文本宽度一致，同时不让日历图标遮挡文本？

解决方案

基于 Kartik的回答，你可以在Chrome和 Edge中这样做来去掉剩余的空白：

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

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

<input type="date" disabled/>