删除表单元素上的默认浏览器样式 [英] Remove default browser styles on form elements

问题描述

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

浏览器有一些默认它们用于呈现表单元素的样式，这从浏览器到浏览器是不同的。有没有办法重置所有的本机浏览器样式的表单元素，如选择，无线电，复选框等，使浏览器一致的外观？

Browsers have some default styles they use for rendering form elements, which is different from browser to browser. Is there a way to reset all of the native browser styles for form elements like select, radios, checkbox etc, to make a consistent look across browsers?

一个快速示例：

可以看到，表单元素呈现的略有不同。我想要的是一些样式，可以重置它们，看起来一样，IE，Firefox和Webkit。

As can see the form elements are rendered slightly differently. What I would like, is some styles, that can reset them, to look alike, for IE, Firefox and Webkit.

那么你该怎么做呢？

推荐答案

简短答案：

长时间回答：您可以，但会感到痛苦。

Long answer: you can, but expect pain.

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

I've hacked together nice looking Radio buttons, Checkboxes and Selects with 'sleight of hand' javascript + css. Basically, just after an input is loaded I hide it and replace it with labels / divs with events bound to them to make them act like they're the right inputs, and css to make them look that way. The events also update the underlying input so that the correct values are submitted with the rest of the form. If my script barfs or JS is off, the user gets the normal controls.

这不是那么有趣，但结果是可以通过的。

It wasn't that fun but the result is passable.

我不期待看到这个混乱的IE所造成的）：

I do not look forward to seeing the mess IE makes of it though :)

我的灵感来自：

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

这篇关于删除表单元素上的默认浏览器样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！