html - 样式化表单元素（选择、复选框、单选等）？

Question

使用 css 样式化表单元素可能会出现问题，因为每个浏览器都以不同的方式呈现标签（就像 safari 呈现复选框时一样）。

好吧，让我们暂时忽略 safari，皮肤输入和按钮相当容易，但如何完全皮肤选择、复选框、单选等。

请参阅此页面：
复选框皮肤
选择皮肤
单选皮肤

听说一些JS框架比如EXTJS或者MooTools可以做到，但是我不想要一个大规模的框架解决方案，只需要独立的JS，我们可以随意修改皮肤，请不要使用JQuery解决方案，因为我不'不要使用它。

在不使用某些特定框架的情况下这样做有什么想法吗？

Answer 1

如果您想要完全控制，那么您通常必须完全替换浏览器控件并用其他元素、样式表和脚本来伪造它们。

如果您不想使用框架，那么它基本上可以归结为 DIY。

也就是说，整个概念有几个问题。

1. 试图让控件按照用户期望的方式运行（给定来自单击、双击、三次单击、右键单击、拖动、箭头键、控制键等的输入）是很难的。
2. 控件可能看起来不像用户期望的那样。

就个人而言，我通常会尝试让表单控件坚持系统默认值，而不是试图偏离它们。给用户他们期望的东西。

Answer 2

今天有相当多的 javascript 解决方案允许对表单元素样式进行广泛的自定义。一个快速的谷歌想出了一些不错的：

• 也许最著名的是Bootstrap CSS 框架：
  https ://getbootstrap.com/docs/4.0/components/forms

• https://www.psd2html.com/js-custom-forms（jQuery插件）

• https://purecss.io/forms

• https://github.com/select2/select2

• https://github.com/harvesthq/chosen

• 复选框/收音机：
  

  • https://codepen.io/vsync/pen/aBOOZB
  • https://codepen.io/vsync/pen/wKkuz
  • https://codepen.io/manabox/pen/raQmpL

今天你可以在Codepen.com上找到多种表单元素样式

---

旧答案（从09 年 5 月 16 日开始）：

是的，这很容易。

您可以使用 niceforms，它是
用于制作漂亮表单的独立脚本，然后您可以根据需要修改
图形图像/CSS。

这个想法是，用相同的功能编写看起来相同
但设计不同的东西，然后
你需要用一些 javascript 魔法“赋予它生命”:)

然后，您必须在整个地方都有 ilsteners，以
检查用户单击的内容，而不是您需要将相同的值反映到与“假”对应
的预隐藏表单元素中 。
意思是操纵它。
然后当您发送表单时，正确的值是通过 JS 放置的。