删除表单元素上的默认浏览器样式

Posted 2023-04-14

【中文标题】删除表单元素上的默认浏览器样式

【英文标题】：Remove default browser styles on form elements

【发布时间】：2010-09-01 09:12:47

【问题描述】：

注意：我尝试在 google 上搜索，但找不到我要找的东西。

浏览器有一些用于呈现表单元素的默认样式，这些样式因浏览器而异。有没有办法重置表单元素（如选择、单选、复选框等）的所有原生浏览器样式，以在浏览器中保持一致的外观？

我做了一个简单的例子：

form elements http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png

可以看到表单元素的呈现方式略有不同。我想要的是一些样式，可以重置它们，使其看起来相似，适用于 IE、Firefox 和 Webkit。

那么你是怎么做到的呢？一个包含所有需要样式的 CSS 样式表的链接会很棒。

【参考方案1】：

简答：你不能。

长答案：你可以，但要期待痛苦。

我用'sleight of hand' javascript + css 将漂亮的单选按钮、复选框和选择组合在一起。基本上，在加载输入之后，我将其隐藏并用标签/ div 替换它，并使用绑定到它们的事件来使它们表现得像它们是正确的输入，并使用 css 使它们看起来那样。这些事件还会更新基础输入，以便与表单的其余部分一起提交正确的值。如果我的脚本 barfs 或 JS 关闭，用户将获得正常的控件。

虽然没那么有趣，但结果还算过得去。

我不期待看到 IE 把它弄得一团糟 :)

我的灵感来自：

http://sourceforge.net/projects/selectreplace/?showfeed=code

【参考方案2】：

这是一个老问题，但添加 CSS 规则 -webkit-appearance:none 可能有助于删除默认的 Webkit 样式，例如Mobile Safari 上的药丸形按钮。