Chrome中的清空叉号可通过CSS隐藏：设置-webkit-appearance: none，并用::-webkit-clear-button和::-webkit-inner-spin-button伪元素设display: none，再加padding-right防文字遮挡。
Chrome 中
Chrome 和 Edge（基于 Chromium）会在 右侧渲染一个默认的清空按钮（×），点击后清空值。这个按钮无法通过 appearance 或常规伪元素直接禁用，但可通过 CSS 隐藏其容器。
关键点在于：该叉号是 Chrome 内置的 ::-webkit-clear-button 伪元素，但它只在输入框有值且获得焦点时才显示；隐藏它最稳妥的方式是同时隐藏父级“清除区域”。
- 给 input 添加
style="padding-right: 1rem;"防止文字被裁切（可选，但推荐） - 用
::-webkit-inner-spin-button和::-webkit-clear-button同时设为display: none - 必须加上
appearance: none，否则部分版本 Chrome 仍可能保留占位区域
<input type="date" style="
-webkit-appearance: none;
appearance: none;
padding-right: 1.2rem;
"><style>
input[type='date']::-webkit-clear-button,
input[type='date']::-webkit-inner-spin-button {
display: none;
}
</style>
Firefox 和 Safari 下为什么没效果？
Firefox 不支持 type="date" 的原生日期控件（直到 v126+ 才实验性支持，且无清空按钮）；Safari 从 iOS 16.4 / macOS 13.3 起才支持 type="date"，且默认不渲染清空叉号。所以你看到的叉号基本只存在于 Chromium 系浏览器中。
这意味着：写 CSS 隐藏叉号的代码，在 Firefox/Safari 中只是“无害地不生效”，不会报错或破坏布局。
- 无需条件加载 CSS，直接全局写即可
- 不必检测用户代理（UA），也不建议用 JS 动态判断浏览器
- 如果项目需兼容旧版 Safari（
用 JavaScript 移除清空行为是否可行？
不可行。清空叉号是浏览器 UI 层的原生控件，不触发标准 DOM 事件（如 click），也无法通过 preventDefault() 拦截。监听 input 或 change 只能知道值变了，但无法区分是用户选了新日期，还是点了叉号——因为两者都会触发相同事件。
- 试图用
document.addEventListener('click', ...)捕获叉号点击，会失败：该按钮不在可遍历的 DOM 树中 - 用 MutationObserver 监听 value 变化再“恢复”，体验差、易误判、且无法阻止初始清空动作
- 真正需要禁用清空逻辑的场景，应改用自定义日期选择器（如 flatpickr、Pikaday），而非硬刚原生 input
隐藏叉号后，用户还能清空日期吗？
可以，但方式变了：用户需手动删除输入框中的年月日文本（例如全选后按 Delete 或 Backspace），或者用键盘快捷键（Ctrl+A → Delete）。Chrome 不会因隐藏叉号而禁用键盘清空能力。
这点容易被忽略：隐藏视觉元素 ≠ 禁用功能。如果你的真实需求是“禁止用户清空”，那 CSS 隐藏只是掩耳盗铃——得配合 required 属性、表单校验，或监听 input 事件拦截空值并自动还原。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
