logo标签列表

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

cssformscross-browserdefaultreset
3
注意：我已经尝试在谷歌上搜索，但没有找到我想要的内容。
浏览器有一些默认样式来呈现表单元素，这些样式因浏览器而异。是否有一种方法可以重置所有表单元素的本机浏览器样式，比如选择框，单选按钮，复选框等，以实现跨浏览器的一致外观？
我制作了一个快速示例： form elements http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png 可以看到表单元素的呈现略有不同。我想要的是一些样式，可以将它们重置为在IE，Firefox和Webkit中看起来相同。
那么你该怎么做呢？带有所有必需样式的CSS样式表的链接将非常好。
2个回答
6
简短回答：你不能。 详细回答：你可以，但是需要承受一定的痛苦。
我使用了一些JavaScript和CSS技巧来制作漂亮的单选按钮、复选框和下拉框。基本上，在输入加载完成后，我隐藏了它，并用标签/ divs代替它们，而这些标签/ divs绑定了事件，使它们表现得像正确的输入控件，CSS则使它们看起来更美观。这些事件还会更新底层的输入控件，以便正确的值随着表单的提交而提交。如果我的脚本出错或JS关闭了，用户将获得普通的控件。
虽然结果还算不错，但这并不好玩。
不过，我不希望看到IE对它进行的混乱处理 :)
我从以下来源得到灵感： http://sourceforge.net/projects/selectreplace/?showfeed=code
4

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接