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

Question

我正在寻找格式化HTML（HTML5）输入字段的最最漂亮的方法。有很多解决方案，但都是如此古老。 （全部使用图像，而不是CSS3）

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

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

Answer 1

您发现的所有解决方案都是“古老的”，因为它们仍然是以跨浏览器方式设置所有输入元素的唯一方式。甚至是你的example link uses images。即使使用JavaScript库也是如此，这些库通常只是用跨度或其他更可管理的元素来替换输入元素。

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

要演示，请在同一系统的不同浏览器中打开包含默认表单字段的网站;然后在具有不同操作系统的系统上打开相同的网站（例如，使用Windows和Mac机器）。您会发现在同一系统上浏览器之间没有太大差异，但不同操作系统的相同浏览器之间会有很大差异。

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

所以，你有两个选择：

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