选择日期后如何在 html 5 [input type="date"] 中删除 X 标记（清除按钮）

Posted 2023-05-07

【中文标题】选择日期后如何在 html 5 [input type="date"] 中删除 X 标记（清除按钮）

【英文标题】：after selecting date how to remove X mark(clear button) in html 5 [input type="date"]

【发布时间】：2018-06-28 08:44:33

【问题描述】：

我知道这似乎是重复的问题，但我仍然不清楚firefox 中的清除按钮和chrome 中的向上/向下箭头。它在我的桌子上占据了更多的空间。我想删除这些功能。我真的不知道javascript 或CSS 中是否有任何功能 我试过这个：

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator 
    display: none;
    -webkit-appearance: none;

但是，仍然获得相同的 X 标记。

【问题讨论】：

你可以查看这个developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear

【参考方案1】：

在 Chrome 中你可以使用

input[type="date"]::-webkit-inner-spin-button,    
input[type="date"]::-webkit-clear-button  display: none; 

另一方面，Firefox 不支持此功能。

使用 3rd 方 jQuery 插件可能会更好。

【讨论】：

我找到了this，但您始终可以检查影子 DOM 以准确了解存在哪些元素。

MDN 也是一个很好的伪元素来源（向下滚动，在左侧菜单中）：developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements