如何消除禁用状态下<input type="date"/>元素隐藏日历图标后遗留的空白区域

这个问题我之前也碰到过，禁用状态下的日期输入框确实会因为日历图标消失但预留空间还在导致视觉问题，试试这几个纯CSS方案，完全不用折腾容器或者固定宽度：

方案一：针对主流WebKit/Blink浏览器（Chrome、Edge、Safari等） #

直接隐藏禁用状态的日历图标，并调整输入框的内边距和宽度，让它自适应文本：

/* 隐藏禁用状态的日历选择器图标 */
input[type="date"]:disabled::-webkit-calendar-picker-indicator {
  display: none;
}

/* 调整输入框宽度和内边距，适配文本 */
input[type="date"]:disabled {
  width: fit-content;
  padding-right: 0.5em; /* 可根据文本显示微调，用1ch单位更精准（1ch=数字0的宽度） */
}

原理说明：默认的日期输入框会给右侧的日历图标预留固定的内边距和宽度，当输入框禁用时图标消失，但预留的空间还在。我们先隐藏图标，再用fit-content让输入框宽度刚好容纳文本内容，最后调整右侧内边距消除多余空白。

方案二：兼容Firefox浏览器 #

Firefox的日期输入框样式逻辑略有不同，需要单独适配：

@-moz-document url-prefix() {
  input[type="date"]:disabled {
    width: fit-content;
    padding-right: 0.5em;
  }
}

原理说明：Firefox禁用状态下会自动隐藏日历图标，但同样会残留右侧预留的内边距，通过fit-content宽度和调整内边距就能完美解决。

方案三：通用整合版 #

把上面两个方案整合，一次搞定所有主流浏览器：

/* 隐藏WebKit/Blink下的禁用状态日历图标 */
input[type="date"]:disabled::-webkit-calendar-picker-indicator {
  display: none;
}

/* 统一调整禁用状态输入框的宽度和内边距 */
input[type="date"]:disabled {
  width: fit-content;
  padding-right: 0.5em;
}

/* Firefox单独适配 */
@-moz-document url-prefix() {
  input[type="date"]:disabled {
    padding-right: 0.4em; /* 可根据Firefox的默认样式微调 */
  }
}

效果验证 #

这样设置后，禁用的<input type="date"/>会自动适配mm/dd/yyyy文本的宽度，既不会有右侧的空白区域，也不会出现文本被遮挡的问题，同时完全保留输入框原本的边框和状态样式，不用额外嵌套容器。

如果文本显示还是有细微偏差，可以把padding-right的数值换成1ch，这个单位是基于当前字体的数字宽度，适配性会更强。

内容的提问来源于stack exchange，提问作者Noah Favelo