能改外边框，但仅作用于整体盒模型；需用box-sizing: border-box防错位，Chrome/Edge要预留padding-right防图标裁剪，隐藏原生按钮须用::-webkit-calendar-picker-indicator并注意Safari兼容性。
input[type="date"] 的外边框能直接改吗？
不能直接改「整个控件」的外边框，因为 input[type="date"] 是一个复合控件：左侧是可编辑文本区，右侧是固定尺寸的日期选择器按钮（小日历图标），浏览器把这两部分打包渲染，CSS 的 border 只作用于整个元素的盒模型边界，但无法单独修饰按钮区域或内部结构。你看到的“外边框”其实是这个整体盒子的边框，它确实可以改，但要注意副作用。
修改外边框的实操写法与常见坑
给 input[type="date"] 加边框和圆角是安全且常用的操作，但必须配合 box-sizing: border-box，否则 padding 和 border 会让控件宽度失控——尤其在表格中会挤出滚动条或错位。
-
border、border-radius、padding都可正常设置，例如：input[type="date"] { border: 2px solid #4a5568; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; } - Chrome / Edge 下右侧小图标默认带内边距，加
padding后可能让图标被裁剪或文字偏移，建议用padding-right: 30px留出空间，再用伪元素微调 - Firefox 不支持
::-webkit-*伪类，所以它的边框样式更“老实”，但也不响应appearance: none，无法隐藏原生按钮 - 不要对
input[type="date"]设置height，它会破坏右侧图标的垂直居中；优先用line-height或padding控制视觉高度
想彻底替换边框风格？得先干掉原生按钮
如果目标是「自定义边框 + 自定义触发图标」，就得隐藏原生日历按钮，再用伪元素或额外 DOM 模拟。这一步绕不开 WebKit 专属伪类：
-
input[type="date"]::-webkit-calendar-picker-indicator控制右侧小图标，设为display: none即可隐藏 - 隐藏后，必须手动加一个
<span>或背景图作为新触发器，并绑定click事件来 focus 输入框（否则用户点不到） - 此时才能放心加任意边框样式，比如双线、虚线、阴影：
border: 3px double #3182ce，不会被原生按钮干扰 - 注意：Safari 16.4+ 开始限制
::-webkit-calendar-picker-indicator的 display 控制，某些版本下display: none失效，需改用opacity: 0; pointer-events: none;替代
移动端和兼容性最易忽略的点
在 iOS Safari 和 Android Chrome 中，input[type="date"] 的点击热区实际比视觉区域大，直接覆盖伪元素或加 padding 可能导致点不中。真正稳定的做法是：
立即学习“前端免费学习笔记（深入）”；
- 保留原生按钮不可见但可点击：用
filter: opacity(0)而非display: none - 用
position: relative+z-index确保自定义图标盖在原生按钮上方，同时透传点击事件（pointer-events: none） - 所有边框改动后务必在真机测试：iOS 上
border-radius过大会截断右侧图标，建议不超过4px - 别依赖
appearance: none——它在 date 类型上基本无效，仅对 text/number 有效
边框本身不是难点，难的是它和右侧图标、内部编辑区、移动端点击热区之间的耦合。改之前先确认：你到底要的是「看起来不一样」，还是「行为和交互也完全可控」——后者意味着放弃原生控件，转向 Flatpickr 或原生 input[type="text"] + JS 格式化方案。
