Mac和PC上所有浏览器的相同表单元素[关闭]答案

【问题标题】：Identical form elements across all browsers on Mac and PC [closed]Mac和PC上所有浏览器的相同表单元素[关闭]
【发布时间】：2013-02-05 13:02:51
【问题描述】：

我正在寻找在 PC 和 Mac 上的所有浏览器中获取相同表单元素的最佳/有效方式。这听起来像是一个非常基本的问题，我应该知道答案，但有趣的是我无法弄清楚。

一段时间以来，我一直在使用 CSS 和偶尔的 JQuery 来设置表单样式，而且我从不担心浏览器/计算机之间的细微差异。

但现在我在一个项目中，它们实际上必须是相同的。有什么想法吗？

【问题讨论】：

您应该向您的经理展示浏览器输入样式之间的差异，并询问他们是否为此进行了预算...
别无选择，只能摆弄 css 以使它们看起来相似。不过，我非常怀疑您是否会在所有浏览器/操作系统中获得完全相同的相似之处。
可能有帮助：stackoverflow.com/questions/5361606/…

标签： jquery html css forms

【解决方案1】：

你不能。复杂表单控件的组件是所谓的 shadow DOM 的一部分：我们可以看到元素由较小的组件组成，但我们无法设置它们的样式。

按钮或文本（文本、密码、搜索、网址、电子邮件、电话）输入字段等更简单的元素通常可以设置为跨浏览器的外观一致（前提是所述浏览器支持您使用的样式）。

如果您尝试对其进行样式设置，几乎所有其他内容都看起来很奇怪。最严重的违规者是选择和复杂输入（文件、日期、日期时间、时间、颜色、范围、数字等），因为它们由多个元素组成（例如，输入字段和一个或两个按钮）。除非浏览器允许您通过特殊的 CSS 属性设置这些组件的样式（我确定我在 webkit 前缀下看到过一些，但无法告诉您是哪些），否则您无法触摸它们。

这里有 3 个选项：

不要以任何会导致其放弃浏览器默认样式的方式设置表单控件的样式（以便简单和复杂的控件继续看起来彼此相似）
根本不使用复杂的表单控件（即没有文件、选择等）
通过 JavaScript 将所有复杂的表单控件替换为简单的控件

【讨论】：