原生表单控件样式差异源于浏览器引擎（WebKit/Blink/Gecko）各自实现，默认无统一规范；需重置appearance、统一font属性、慎用outline，并针对移动端特殊类型采取兼容策略。
为什么原生表单控件在不同浏览器里长得不一样
因为 <input type="text">、<select></select>、<textarea></textarea> 这些元素的默认样式由浏览器引擎（WebKit / Blink / Gecko）各自实现，没有强制统一规范。比如 select 在 Chrome 里带下拉箭头，在 Safari 里箭头位置偏右，Firefox 则可能默认无边框；number 输入框在 Edge 有上下微调按钮，Chrome 默认也有，但 Safari 完全隐藏——这些不是 bug，是标准允许的渲染自由度。
用 CSS 重置常见表单控件的默认样式
关键不是“美化”，而是先“归零”。不重置就直接加 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 fill='%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;
}
处理移动端特殊输入类型（date / time / number）的兼容策略
这些类型在 iOS 和 Android 上原生体验好，但样式不可控。强行用 appearance: none 会导致 iOS Safari 完全禁用弹出面板（尤其 input[type="date"]），所以不能一概而论。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
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(); })阻止默认提示，再手动插入<span class="error"></span>
最易被忽略的是：当用户未修改过字段时，:invalid 会在页面加载后立即生效（即使没聚焦），这会让初次进入表单的用户看到满屏红框。应在 input 第一次获得焦点后再启用验证样式，或用 :user-invalid（仅 Chromium 支持）替代。
