Cleanslate 表单样式详解：按钮渐变、输入框边框、下拉框一键还原浏览器默认外观
【免费下载链接】cleanslateAn extreme CSS reset stylesheet, for aggressively resetting the styling of an element and its children. Composed exclusively of CSS !important rules.项目地址: https://gitcode.com/gh_mirrors/cl/cleanslate
Cleanslate 是一款由纯!important规则组成的“极端”CSS reset 样式表，它能一键还原按钮、输入框、下拉框等表单控件的浏览器默认外观。当你开发第三方小部件、在宿主页面上分发内容或嵌入表单时，宿主页面的 CSS 会不断“污染”你的控件样式——Cleanslate 帮你彻底摆脱这个问题。下面带你快速看懂它的表单样式规则、3 步启用方法，以及最容易踩的坑。
🎯 Cleanslate 是什么：给表单控件的“一键还原”
传统 reset 样式表（如 Eric Meyer 的 Reset CSS）面向的是整站开发，而 Cleanslate 的定位更“极端”：
- 只作用于标记了
class="cleanslate"的容器及其子元素，不影响页面其他部分 - 全部使用
!important规则，可以强制覆盖宿主页面任意强度的样式 - 纯 CSS，零 JavaScript 依赖，核心文件只有 cleanslate.css 一个
它最适合的场景：把内容（widget、聚合新闻、表单组件）分发到大量第三方网站时，无法预判宿主站会用什么样式，用 Cleanslate 把你那部分 DOM“还原到出厂设置”，再从干净的起点开始设计。
⚡ 三步启用：让表单样式重置立刻生效
按 Usage 文档 的方法，只需 3 步：
- 引入样式表：在宿主页面
<head>中加入 Cleanslate 的 CSS - 给容器加类名：在你要重置的表单外包裹一个元素，加上
class="cleanslate" - 自己的样式加
!important：因为 Cleanslate 全部是!important规则，你在该容器内的自定义 CSS 也必须带上!important才能生效
<div class="myContainer cleanslate"> <form> <input type="text" /> <select><option>选项</option></select> <button>提交</button> </form> </div>这样，容器内所有表单控件立即回到浏览器默认观感，而不受宿主页面的全局样式干扰。
🔘 按钮样式：渐变背景 + 蓝色按下反馈
Cleanslate 对button和input[type=submit]做了一套精心还原的“拟物”处理（源码见cleanslate.css第 273-308 行）：
| 属性 | 效果 |
|---|---|
| 背景 | 白色到浅灰的垂直linear-gradient渐变，带旧浏览器兜底 |
| 边框 | 1px solid #a6a6a6，border-radius: 4px |
| 阴影 | 1px 1px 0px #eee，制造轻微凸起感 |
| 内边距 | 2px 6px 3px，文字水平居中 |
| 按下态 | :active时背景切换为蓝色渐变（#3b679e → #2988d9），边框变深蓝 |
这套规则同时兼容了-moz-、-webkit-、-o-、-ms-各厂商前缀，甚至连 IE6-9 的DXImageTransform滤镜都覆盖了——在宿主页面 CSS 乱飞的情况下，依然保证按钮看起来像“浏览器原生按钮”。
📝 输入框样式：统一的 #ccc 边框
所有输入类控件共享一条核心规则：select、textarea、input统一1px solid #ccc边框，保证整页表单的视觉一致性：
input[type=text]：白色背景、1px内边距、small字号，还原朴素输入框外观textarea：恢复-webkit-appearance: textarea原生外观，11pxArial 字体、13px行高，允许双向resize- 聚焦态：
input:focus与textarea:focus的outline被重置，避免宿主站五颜六色的焦点描边 - 对齐：
input与select强制vertical-align: middle，解决基线错位这个经典表单难题
🔽 下拉框、复选框与单选框：还原原生观感
select下拉框：11pxHelvetica/Arial 字体、inline-block显示，配合统一的#ccc边框，回到浏览器默认下拉框的样子- 复选框 / 单选框：
1px solid #2b2b2b深色边框 +4px圆角，去掉宿主站可能覆盖的outline；单选框额外设置2px左右、3px底部的外边距，保证与文字垂直对齐 - 交互反馈：所有可点击控件（
a、button、select、submit、radio、checkbox）统一cursor: pointer，明确“我可以点你” - 隐藏字段：
input[type=hidden]强制display: none，防止被宿主样式意外显示出来
🧪 动手验证：forms.html 对照测试页
项目自带了一个直观的验证页面tools/forms.html：上半部分是浏览器默认的按钮、提交钮、下拉框、单选、复选与文本域，下半部分是加了class="cleanslate"的同一组控件。本地打开对比，即可亲眼看到 Cleanslate 还原后的表单外观与原生默认值高度一致——这是检验 reset 效果的最佳方法。
⚠️ 常见坑：你的样式必须带 !important
因为 Cleanslate 内部全部是!important，普通规则（包括 jQuery 的.css()）都打不过它。根据 Manipulating styles 文档 给出的正确姿势：
elem.style.setProperty('color', 'red', 'important'); // ✅ 生效 elem.style.cssText = "border: red !important"; // ✅ 生效 jQuery(elem).css("border", "red"); // ❌ 无效简单说：只要你的控件在.cleanslate容器内，无论写 CSS 还是操作 DOM，记得给样式值加上!important，否则修改会“无声无息”地失效。
✅ 小结
| 场景 | Cleanslate 的做法 |
|---|---|
| 按钮 | 白→灰垂直渐变 + 4px 圆角 + 按下蓝色渐变反馈 |
| 输入框 / 下拉框 | 统一#ccc边框，聚焦描边被重置 |
| 复选 / 单选 | 深色边框 + 圆角，原生对齐 |
| 整体 | 仅重置.cleanslate容器内部，宿主页面零副作用 |
Cleanslate 用不到几百行 CSS，就把“表单样式被宿主页面包抄”这个老大难问题变成了加一个 class 的事。如果你的小部件或分发内容里有表单，不妨把cleanslate.css引入项目，配合tools/forms.html对照验证，几分钟就能看到原生级的干净效果。
【免费下载链接】cleanslateAn extreme CSS reset stylesheet, for aggressively resetting the styling of an element and its children. Composed exclusively of CSS !important rules.项目地址: https://gitcode.com/gh_mirrors/cl/cleanslate
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
