如何移除HTML日期时间输入框的清除叉号（兼容Firefox等多浏览器）

嘿，刚好研究过这个问题，给你整理一套能覆盖Chrome和Firefox的解决方案，连Safari也能顺便兼容到～

先确认你已实现的Chrome/Edge方案（WebKit内核浏览器） #

你应该已经用到了WebKit的专属伪元素选择器，这里再明确一下写法，确保覆盖时间和日期输入框：

/* 隐藏Chrome/Edge/Safari中时间输入框的清除叉号 */
input[type="time"]::-webkit-clear-button,
/* 如果需要处理日期输入框也加上这行 */
input[type="date"]::-webkit-clear-button {
    display: none;
}

Firefox浏览器的专属解决方案 #

Firefox用的是另一个伪元素::-moz-clear-button，直接设置隐藏就能搞定：

/* 隐藏Firefox中时间输入框的清除叉号 */
input[type="time"]::-moz-clear-button,
/* 日期输入框同理 */
input[type="date"]::-moz-clear-button {
    display: none;
    /* 保险起见再加个visibility: hidden，防止某些版本的Firefox有特殊表现 */
    visibility: hidden;
}

整合为跨浏览器通用代码 #

把上面的规则合并，就能一次性搞定主流浏览器了：

/* 跨浏览器隐藏日期、时间输入框的清除叉号 */
input[type="time"]::-webkit-clear-button,
input[type="date"]::-webkit-clear-button,
input[type="time"]::-moz-clear-button,
input[type="date"]::-moz-clear-button {
    display: none;
    visibility: hidden;
}

额外小补充（可选） #

如果你还想隐藏时间输入框里的上下微调箭头，也可以加上这些规则：

/* 隐藏WebKit内核浏览器的时间微调箭头 */
input[type="time"]::-webkit-inner-spin-button {
    display: none;
}
/* 隐藏Firefox的时间微调箭头 */
input[type="time"]::-moz-spin-button {
    display: none;
}

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