设置 input[type="date"] 的 height 通常无效，应通过 padding 和 font-size 控制视觉高度，width 可用但需配合 box-sizing: border-box；隐藏原生箭头需用 appearance: none 和 ::-moz-calendar-picker-button。
直接设置 width 和 height 通常无效
HTML 原生 <input type="date"> 在多数浏览器（Chrome、Edge、Safari）中，内部由系统控件或 Shadow DOM 渲染，height 属性常被忽略，width 虽可设但可能只影响外层容器，实际日期选择器弹出框尺寸不受影响。强行用 height: 40px 可能导致文字垂直偏移或按钮错位。
用 padding + font-size 控制视觉高度
真正可靠的方式是通过内边距和字体大小“撑开”输入框的显示高度，同时保持控件功能正常：
<input type="date" class="date-input">
<p>.date-input {
padding: 8px 12px; /<em> 上下 padding 决定视觉高度 </em>/
font-size: 16px; /<em> 避免小字体导致控件挤压 </em>/
width: 160px; /<em> width 有效，控制整体宽度 </em>/
box-sizing: border-box; /<em> 确保 padding 不额外增加宽度 </em>/
}- 不要依赖
height—— Chrome 会覆盖它，Safari 可能截断下拉箭头 -
padding是最安全的纵向尺寸调节方式，兼容性好 - 若需更紧凑，可降到
padding: 4px 8px，但需测试 iOS Safari 是否仍可点击箭头
隐藏原生箭头再自定义（仅当必须深度定制时）
如果设计要求完全替换下拉图标或统一多浏览器样式，需手动隐藏原生控件并叠加伪元素：
.date-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M3 4l3 3 3-3z'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
padding-right: 32px; /* 为自定义箭头留空间 */
}
<p>/<em> 防止 Firefox 显示双箭头 </em>/
.date-input::-moz-calendar-picker-button {
display: none;
}-
-webkit-appearance: none是关键，否则 Safari/Chrome 不响应样式 - Firefox 需额外处理
::-moz-calendar-picker-button，否则会残留原生按钮 - 自定义 SVG 箭头要确保在高 DPI 屏幕清晰，建议用 data URL 或雪碧图
移动端适配要注意的坑
iOS Safari 的日期输入框无法通过 CSS 修改弹出面板样式，且 font-size < 16px 可能触发缩放，导致布局跳动：
立即学习“前端免费学习笔记（深入）”；
- 务必在
<head>中设置<meta name="viewport" content="width=device-width, initial-scale=1"> - 避免对
input[type="date"]设置transform: scale()—— 弹出面板位置会错乱 - 真机测试比模拟器更重要：iOS 16+ 对
padding的解析更严格，过小的padding-top可能使日期文字贴顶
实际宽度调整基本靠 width + padding 组合，高度几乎全靠 padding 拉，别碰 height。最易被忽略的是 Firefox 的双按钮残留和 iOS 缩放陷阱。
