chrome中input[type="date"]的蓝色外边框是聚焦时的outline样式，非border；应通过outline替代而非none以保障可访问性，移动端ios safari则基本不可控。
Chrome 中 input[type="date"] 的蓝色外边框是什么
那是 Chrome（及基于 Chromium 的浏览器）对聚焦状态（:focus）施加的默认 outline 样式，不是边框（border），所以改 border 没用。它属于浏览器 UA 样式，优先级低但存在，必须显式覆盖。
如何安全地移除这个 outline
直接设 outline: none 虽然有效，但会损害可访问性——键盘用户无法识别当前聚焦的日期控件。更稳妥的做法是用自定义焦点样式替代：
- 保留
outline的语义功能，只替换其外观 - 用
outline: 2px solid #007bff或带圆角的outline替代原生蓝色 - 若必须完全隐藏，请同时提供其他视觉反馈，例如加深
border-color或添加背景色变化
示例（兼顾可访问性）：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
input[type="date"]:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
为什么有时候 outline: none 不生效
常见原因有三个：
- 浏览器高优先级 UA 样式（如 Chrome 的
input:-webkit-autofill:focus）可能覆盖你的规则，需加!important（不推荐）或提高选择器特异性 - 某些系统/浏览器（如 macOS Safari）对表单控件限制更严，
outline可能无法完全禁用，此时应接受默认行为 - 你修改的是
border或box-shadow，而没动outline—— 请确认开发者工具里真正高亮的是outline属性
移动端 iOS Safari 的特殊处理
iOS Safari 对 input[type="date"] 的样式控制极弱，outline 几乎不可见，且无法通过 CSS 修改其原生选择器界面。如果你看到“蓝色边框”，大概率是它在聚焦时临时渲染的浅蓝蒙层（非 CSS 可控）。此时：
- 不要强行 hack，避免触发兼容性降级
- 可对整个输入框加
appearance: none+ 自定义按钮，但会丢失原生日期面板 - 更现实的做法：接受平台差异，仅在桌面端精细化调整
原生表单控件的样式自由度始终受限，尤其在日期、时间、文件上传这类高度集成的输入类型上——与其花时间对抗，不如确认是否真有必要取消那个 outline。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
