样式表单元素（选择，复选框，广播等）？

Question

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

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

参见本页：
Checkbox skinning
Select skinning
Radio skinning

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

如果不使用某些特定框架，是否有任何想法？

Answer 1

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

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

尽管如此，整个概念还存在一些问题。

1. 尝试让控件表现出用户的期望（通过点击，双击，三击，右键单击，拖动，箭头键，控制键等等给出输入） hard < /强>
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

上找到多种表单元素样式

---

旧答案（来自 2009年5月16日）：

  是的，这很容易。

     

你可以使用niceforms，这是独立的脚本   漂亮的表格，然后你可以修改图形图像/   CSS是你的愿望。

     

这个想法是，编写看起来相同的东西   功能但不同的设计，然后你需要“给它   生活“用一些javascript魔法：）

     

然后，你必须在整个地方都有ilsteners，以便检查   用户点击了什么，而不是需要反映相同的值   对于预先隐藏的形式元素，对应于“假”   一。意思是操纵它。
当你发送表格时，   正确的价值观是通过JS的地方。