要让不同类型的 input 在 H5 页面中呈现统一样式和圆角边框，需批量覆盖 CSS 并清除浏览器默认干预：统一 box-sizing、尺寸、字体；禁用 appearance；重置 border-radius、box-shadow 和 focus 样式；适配 placeholder 和移动端交互。
要让不同类型的 input（如 text、email、password、search、number 等）在 H5 页面中呈现统一样式和圆角边框，关键不是“逐个写样式”，而是用 CSS 选择器批量覆盖 + 清除各浏览器的默认干预。下面分四块讲清楚怎么做。
统一基础盒模型与尺寸控制
所有 input 必须先归一化盒模型，否则 padding 和 border 会让宽度失控，尤其在响应式布局里容易错位或换行：
- 给所有文本类 input 加 box-sizing: border-box，包括
input[type="text"]、input[type="email"]、input[type="search"]、input[type="password"]、input[type="number"]等 - 统一设置 padding、font-size、line-height 和 font-family，避免 Safari 或 Chrome 下字体撑高不一致
- 显式声明 height 或 min-height（如
height: 42px），防止某些 type（如search）在 iOS 下自动加高
清除浏览器默认外观干扰
Chrome、Safari、Firefox 对不同 type 的 input 有各自强干预，默认圆角、内阴影、清空按钮、搜索图标都会破坏统一性：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 加 -webkit-appearance: none 和 appearance: none，禁用原生控件样式（注意：
date、time等控件加了会失效，别乱套） - 对
type="search"单独处理清空按钮：input[type="search"]::-webkit-search-cancel-button { appearance: none; }，再加::-webkit-search-decoration { display: none; }去掉搜索图标 - iOS 下默认内阴影和圆角必须重置：
border-radius: 6px（你想要的值）+box-shadow: none
统一边框、圆角与聚焦反馈
只设 border-radius 不一定生效——父容器溢出、伪元素残留、appearance 未清都可能让它失效：
- 统一设置 border（如
border: 1px solid #d1d5db）和 border-radius（如border-radius: 6px） - 聚焦时必须改 outline: none，但绝不能只删不补——同时定义
:focus样式，比如加深边框色 + 添加box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2)，兼顾视觉反馈与可访问性 - 若发现圆角被截断，检查是否漏清了
::-webkit-inner-spin-button（number类型的上下箭头）：input[type="number"]::-webkit-inner-spin-button { appearance: none; }
适配 placeholder 与移动端交互
placeholder 颜色不统一、iOS 输入时弹出层遮挡、焦点响应慢，都会影响“统一感”：
- placeholder 要写全兼容写法：
::placeholder、::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder，颜色统一设为#9ca3af这类中灰 - 移动端 Safari 的
:focus触发延迟明显，加touch-action: manipulation提升响应速度 - 避免用
width: 100%+padding导致内容被遮挡，推荐用max-width: 100%并配合box-sizing保安全
