3

注意：我试过在谷歌上搜索，但找不到我要找的东西。

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

我做了一个简单的例子：

表单元素 http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png

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

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

4

2 回答 2

6

简短的回答：你不能。

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

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

这不是那么有趣，但结果是可以接受的。

我不期待看到 IE 把它弄得一团糟：）

我的灵感来自：

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

于 2010-09-01T09:20:09.917 回答
4

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

于 2015-02-04T12:49:34.143 回答