如何让input[type=datetime-local]仅显示日期文本并隐藏其他元素？

你之前的代码仅对WebKit内核浏览器（Chrome、Edge、Safari）生效，要实现跨浏览器隐藏所有相关元素并仅显示日期文本，可使用以下CSS方案：

/* 让输入框以普通文本模式交互，避免触发日期选择器弹窗 */
input[type="datetime-local"] {
  inputmode: text;
}

/* WebKit内核浏览器：隐藏日历选择器图标 */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* Firefox：隐藏日历选择器图标 */
input[type="datetime-local"]::-moz-calendar-picker-indicator {
  display: none;
}

/* Firefox：隐藏输入值后的清除按钮 */
input[type="datetime-local"]::-moz-clear-button {
  display: none;
}

说明： #

• inputmode: text 会让浏览器将该输入框视为普通文本输入控件，不会触发原生日期选择器弹窗，同时保留datetime-local类型的格式校验能力。
• 各浏览器的伪元素选择器分别针对对应内核的图标/按钮进行隐藏，确保在Chrome、Edge、Safari、Firefox等现代浏览器中都能生效。

如果不需要原生格式校验，也可以直接将输入框类型改为text，但这样会丢失浏览器自带的日期格式验证功能，需根据业务需求选择。

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