重新设计默认 HTML 输入字段的最佳方法是什么？

Question

我正在寻找最漂亮的方式来格式化 HTML (HTML5) 输入字段。有很多解决方案，但都太老了。 （全部使用图片，不是 CSS3）

我想要像这样的相同选择字段：https://lector.hu/en/，我想要使用漂亮的上传区域，也许还有自动调整大小。

是否有任何基于 javascript 的跨浏览器兼容性库，可以帮助重新设计 html 上的所有输入字段？

Answer 1

您找到的所有解决方案都是“过时的”，因为它们仍然是以跨浏览器方式设置 所有 输入元素样式的唯一方法。甚至你的example link uses images。即使是 JavaScript 库也是如此，它通常只是用 span 或其他更具样式的元素动态替换输入元素。

样式表单输入的问题，以及为什么您不会找到任何不使用图像和/或元素替换的跨浏览器方式，因为表单元素实际上是 system 元素，而不是 HTML 元素。

为了演示，在同一系统的不同浏览器中打开一个带有默认表单域的网站；然后在具有不同操作系统的系统上打开相同的网站（例如，使用 Windows 和 Mac 机器）。你会发现，在同一个系统上浏览器之间不会有太大的区别，但是在不同的操作系统上，相同的浏览器会有很大的差异。

有些东西是可以设计的——例如输入字段的边框，因此在不同的浏览器中可能会略有不同，但您会注意到下拉（选择）和上传字段等内容几乎相同。这是因为浏览器没有太多权限来更改这些元素（可能的例外是 Internet Explorer，尤其是旧版本，因为它是内置于 Windows 中的）。

所以，你有两个选择：

1. 咬紧牙关，使用图片和/或 JavaScript
2. 接受不同浏览器和平台的输入会略有不同（这不一定是坏事，因为它会与用户使用的系统保持一致）