原生表单控件样式差异源于浏览器引擎（WebKit/Blink/Gecko）各自实现，默认无统一规范；需重置appearance、统一font属性、慎用outline，并针对移动端特殊类型采取兼容策略。
因为 、、 这些元素的默认样式由浏览器引擎（WebKit / Blink / Gecko）各自实现，没有强制统一规范。比如 select 在 Chrome 里带下拉箭头，在 Safari 里箭头位置偏右，Firefox 则可能默认无边框；number 输入框在 Edge 有上下微调按钮，Chrome 默认也有，但 Safari 完全隐藏——这些不是 bug，是标准允许的渲染自由度。
关键不是“美化”，而是先“归零”。不重置就直接加 border 或 padding，容易触发某些浏览器的内部布局冲突（比如 iOS Safari 对 input[type="date"] 的 padding 处理异常）。
appearance：对 select、checkbox、radio 等控件显式设为 none 才能完全接管样式outline: none 要慎用——移除聚焦轮廓会损害可访问性，建议用 outline: 2px solid #007bff 替代font 相关属性（font-family、font-size、line-height）必须统一设置，否则在 Windows 和 macOS 下因系统字体栈差异导致高度不一致input, select, textarea, button {
margin: 0;
padding: 8px 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
}
select {
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fi
ll='%23666' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 12px;
}
input:focus, select:focus, textarea:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
这些类型在 iOS 和 Android 上原生体验好，但样式不可控。强行用 appearance: none 会导致 iOS Safari 完全禁用弹出面板（尤其 input[type="date"]），所以不能一概而论。
input[type="date"] 和 input[type="time"] 建议保留原生行为，只通过 ::webkit-input-placeholder 和字体统一做视觉收敛input[type="number"] 在 Chrome/Edge 会显示上下箭头，可用 ::-webkit-inner-spin-button { appearance: none; } 隐藏，但需补上 margin: 0 防止留白if (!('showPicker' in HTMLInputElement.prototype)) 再降级到 JS 方案，而不是全局禁用原生浏览器内置的 required 或 pattern 错误提示（ValidityState 触发的 tooltip）无法用 CSS 定制内容，但可以控制是否显示及触发时机。
:valid / :invalid 伪类配合 transition 实现边框变色，比等原生 tooltip 更及时setCustomValidity("") 可清空当前字段的验证错误状态，避免多次提交后残留提示oninvalid 属性写内联 JS，改用 addEventListener('invalid', e => { e.preventDefault(); }) 阻止默认提示，再手动插入 最易被忽略的是：当用户未修改过字段时，:invalid 会在页面加载后立即生效（即使没聚焦），这会让初次进入表单的用户看到满屏红框。应在 input 第一次获得焦点后再启用验证样式，或用 :user-invalid（仅 Chromium 支持）替代。