如何统一css初级项目中所有输入框样式？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1030个文字，预计阅读时间需要5分钟。
浏览器对不同的 `type` 的支持情况各不相同。以下是一些常见的 `` 标签类型及其在浏览器中的表现：
根本原因不是 bug，而是各浏览器 UA 样式（User Agent Stylesheet）对不同 type 的 appearance、padding、border-radius 处理不一致。解决思路不是逐个 type 覆盖，而是用一套基础重置兜底：
input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #ccc; padding: 8px 12px; font-size: 14px; line-height: 1.4; border-radius: 4px; box-sizing: border-box; }
注意：appearance: none 必须写全三端前缀，否则 Safari 下 search 或 number 仍保留原生控件。
placeholder 文字颜色和垂直对齐总不一致
::placeholder 伪元素在不同浏览器中默认样式不同：Chrome 默认浅灰，Firefox 更淡，且部分老版本需要前缀；更隐蔽的问题是，当设置 line-height 或 height 后，placeholder 垂直居中常偏上或偏下。
本文共计1030个文字，预计阅读时间需要5分钟。
浏览器对不同的 `type` 的支持情况各不相同。以下是一些常见的 `` 标签类型及其在浏览器中的表现：
根本原因不是 bug，而是各浏览器 UA 样式（User Agent Stylesheet）对不同 type 的 appearance、padding、border-radius 处理不一致。解决思路不是逐个 type 覆盖，而是用一套基础重置兜底：
input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #ccc; padding: 8px 12px; font-size: 14px; line-height: 1.4; border-radius: 4px; box-sizing: border-box; }
注意：appearance: none 必须写全三端前缀，否则 Safari 下 search 或 number 仍保留原生控件。
placeholder 文字颜色和垂直对齐总不一致
::placeholder 伪元素在不同浏览器中默认样式不同：Chrome 默认浅灰，Firefox 更淡，且部分老版本需要前缀；更隐蔽的问题是，当设置 line-height 或 height 后，placeholder 垂直居中常偏上或偏下。