Chrome/Firefox中input[type="date"]的“阴影”实为UA控制的原生焦点边框（如Chrome蓝色环、Firefox虚线框），由outline或border实现，非box-shadow；直接设outline:none会损害键盘用户可访问性，应改用border-color或自定义box-shadow替代，并注意Firefox不支持appearance:none、iOS Safari无法控制弹出面板样式。
Chrome/Firefox 中 input[type="date"] 的阴影是默认焦点样式
这个“阴影”不是 CSS box-shadow，而是浏览器对表单控件聚焦时渲染的原生高亮边框（比如 Chrome 的蓝色环、Firefox 的虚线框）。它由用户代理样式表（UA stylesheet）控制，不能靠简单覆盖 box-shadow 去掉。
真正起作用的是 :focus 状态下的 outline 或 border。但要注意：直接设 outline: none 会损害可访问性（键盘用户无法识别当前焦点），应配合 outline-offset 或重绘焦点样式。
- Chrome 下主要响应
outline，且默认有outline-offset: 2px - Firefox 对
input[type="date"]的聚焦样式更顽固，有时需加!important才能覆盖 - Safari 在较新版本中也遵循类似逻辑，但部分旧版需额外处理
-webkit-appearance: none后再自定义
用 CSS 移除焦点阴影的可靠写法
以下规则能跨主流浏览器生效，同时保留基本可访问性（用 border 模拟焦点提示）：
input[type="date"]:focus {
outline: none;
border-color: #007bff; /* 替换为你需要的焦点边框色 */
box-shadow: 0 0 0 0.2rem rgba(0, 123, 187, 0.25); /* 可选：用 box-shadow 模拟柔和焦点环 */
}如果连 border 都不想变，只想要“完全无感”，可设：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
input[type="date"]:focus {
outline: none;
border-color: inherit;
box-shadow: none;
}但再次提醒：这会让键盘导航用户失去视觉反馈，不推荐在生产环境无替代方案地使用。
为什么 appearance: none 有时没用？
对 input[type="date"]，-webkit-appearance: none 在 Chrome 和 Safari 中能解除部分原生样式束缚，但 Firefox 目前仍强制保留其内部 UI 结构，因此无法通过该属性彻底“扁平化”控件外观。
- 加了
-webkit-appearance: none后，Chrome 允许你重写padding、background等，但日期下拉箭头可能消失或错位 - Firefox 忽略
-webkit-appearance，也不支持appearance: none（截至 Firefox 128） - 若目标是完全自定义外观，建议用第三方库（如 flatpickr）或封装
input[type="text"]+ JS 日期校验，而非硬改原生控件
移动端 Safari 的特殊表现
iOS Safari 不允许用 CSS 修改原生日期选择器的触发区域样式，:focus 样式仅作用于输入框本身，不影响弹出的滚轮面板。也就是说：你能去掉输入框的焦点环，但点开后看到的系统级日期选择器样式完全不可控。
这意味着如果你的需求是“整个日期交互流程无阴影/无高亮”，纯 CSS 方案注定失败——必须接受系统级 UI 的存在，或切换为自研日期面板。
最常被忽略的一点：所谓“阴影”，在不同上下文里其实指代不同东西——可能是 UA outline、可能是开发者误加的 box-shadow、也可能是 iOS 键盘弹出时页面滚动导致的视觉残留。排查前先用 DevTools 的 “Styles” 面板锁定真实生效的规则。
