需同时设置outline: none、:focus-visible边框变色及::-webkit-inner-spin-button和::-webkit-calendar-picker-indicator的appearance: none，才能彻底移除date输入框获焦时的默认蓝色轮廓。
如何用 CSS 移除 <input type="date"> 获焦时的默认蓝色轮廓
浏览器对 <input type="date"> 默认添加的焦点轮廓（通常是蓝色外边框）无法通过简单设置 outline: none 彻底移除——因为部分浏览器（如 Chrome）会把焦点样式渲染在内部 Shadow DOM 的实际控件上，而不仅仅是 input 元素本身。
实操建议：
- 先对原生
<input type="date">元素应用outline: none和border: 1px solid #ccc（或其他你想要的边框），覆盖基础状态 - 加上
:focus-visible选择器确保仅在键盘聚焦时生效，避免鼠标点击后也误删轮廓（可访问性友好） - 针对 Chrome/Edge，必须额外写
input[type="date"]::-webkit-inner-spin-button和::-webkit-calendar-picker-indicator的appearance: none，否则焦点轮廓可能残留或错位
input[type="date"] {
outline: none;
border: 1px solid #ddd;
}
input[type="date"]:focus-visible {
outline: none;
border-color: #007bff;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
appearance: none;
}为什么只用 outline: none 不起作用
Chrome 对 date 输入框的焦点样式实际作用于 Shadow DOM 中的伪元素（比如 ::-webkit-inner-spin-button），而非 input 本体。直接写 input:focus { outline: none } 只能影响 input 元素自身的 outline，但浏览器仍会在 picker 按钮或内部控件上叠加焦点反馈。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 点击日期输入框后，右侧小日历图标周围出现一圈蓝边，但 input 边框没变——这就是伪元素在“偷偷”加轮廓
- 用 Tab 键聚焦时轮廓正常消失，但鼠标点击后又出现——说明没处理
:focus-visible和:focus的差异 - 加了
appearance: none却没生效——漏写了::-webkit-calendar-picker-indicator或拼错名称
兼容性与可访问性提醒
完全移除焦点样式会损害键盘用户的导航体验。更稳妥的做法是「替换」而非「删除」：
- 用
box-shadow: 0 0 0 2px rgba(0,123,255,0.25)替代原生 outline，视觉更柔和且可控 - 避免在
:focus上用outline: 0，改用:focus-visible配合outline: none，让鼠标用户不受影响，键盘用户仍有提示 - Safari 对
::-webkit-calendar-picker-indicator支持较弱，若需强一致性，考虑用纯 JS 日期组件（如 flatpickr）替代原生 input
自定义日期输入框的最小可行 CSS 片段
以下代码在 Chrome、Edge、Firefox（有限支持）中可稳定隐藏/重绘焦点轮廓，且不破坏交互：
input[type="date"] {
padding: 6px 10px;
border: 1px solid #ced4da;
border-radius: 4px;
}
input[type="date"]:focus-visible {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
appearance: none;
}注意：Firefox 不支持 ::-webkit-* 伪元素，所以它的焦点样式相对简单，一般只需处理 :focus-visible 即可。真正难搞的是 Chrome 的 Shadow DOM 细节——它藏得深，改起来就得一层层点名。
