Chrome/Edge 中可通过 input[type="date"]::-webkit-calendar-picker-indicator { display: none; } 隐藏右侧日历图标，同时需设置 -webkit-appearance: none; appearance: none; padding-inline-end: 0.5rem; background-color: #fff; 确保视觉一致且点击区域正常。
Chrome / Edge 中 <input type="date"> 怎么去掉右侧日历图标？
直接隐藏不可靠——浏览器原生控件不提供标准 CSS 接口控制该图标，但可通过伪元素覆盖或透明化实现视觉隐藏。关键不是“删掉”，而是“让它看不见且不影响功能”。
-
::webkit-calendar-picker-indicator是 Chrome/Edge 的专有伪元素，必须用display: none或opacity: 0处理，仅设visibility: hidden仍占布局空间 - 必须加
-webkit-appearance: none，否则部分旧版 Chrome 下伪元素不生效 - 若同时设置
background: transparent，需额外补background-color: white（或其他父容器背景色），避免日期文字被透底干扰可读性
Firefox 不支持 ::webkit-calendar-picker-indicator，怎么统一处理？
Firefox 根本不渲染日历图标，所以无需隐藏；但为保持跨浏览器样式一致，应主动重置其可能的默认内边距或背景，避免在 Firefox 下因 -webkit-appearance: none 导致输入框高度塌陷或文字错位。
- 对 Firefox，重点加
padding-right: 0和background-image: none（虽然它本来就没有） - 统一写法建议用
@supports (-moz-appearance: none)包裹 Firefox 专属规则，但更稳妥的是直接写通用重置：所有浏览器都设padding-inline-end: 0.5rem（留点右空隙防文字贴边） - 不要依赖
appearance: none全局清除——Firefox 的date输入框在appearance: none下会退化为纯文本框，丢失日期格式校验和移动端原生键盘
隐藏图标后，用户还能正常唤起日期选择器吗？
能。隐藏的只是视觉图标，<input type="date"> 的交互逻辑完全不受影响：点击输入框任意位置（包括原来图标的区域）仍会触发原生日期面板；键盘 Enter 或 Space 也照常唤起。
- 测试要点：用鼠标点击输入框左侧、中间、右侧，确认全部能弹出选择器
- 移动端务必真机测试——iOS Safari 虽无图标，但点击区域小；Android Chrome 隐藏图标后若
padding-right设为0，可能导致点击热区过窄，建议保留至少0.3rem - 无障碍访问不受影响：
aria-label或label[for]仍正常工作，屏幕阅读器仍识别为日期输入控件
完整可用的最小 CSS 规则长什么样？
下面这段代码已在 Chrome 115+、Edge 114+、Firefox 115+、Safari 16.4+ 实测通过，不依赖 JS，无兼容性降级风险：
立即学习“前端免费学习笔记（深入）”；
input[type="date"] {
-webkit-appearance: none;
appearance: none;
padding-inline-end: 0.5rem;
background-color: #fff;
}
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
}
注意：Safari 从 16.4 开始支持 ::-webkit-calendar-picker-indicator，旧版 Safari（≤16.3）会忽略该规则，但本身也不显示图标，所以无需额外 hack。
真正容易被忽略的是 padding-inline-end 的值——设太小，移动端点不准；设太大，桌面端看起来右边空太多。实际项目中建议先用 0.5rem，再根据字体大小和整体设计微调。
