customInputs:输入元素的自定义样式

浏览器的常规复选框和收音机通常很难看，或者可能不适合您的设计。 在本教程中，我将向您展示如何使用 CSS 和用于复选标记的为收音机和复选框应用您自己的样式。 随意根据您的需要更改样式（取决于您的图标字体和您必须执行的默认字体）。 另外我解释了如何创建一个开/关开关。 我使用 CSS3，但我提供了一个回退来呈现旧浏览器的默认复选框和收音机 (IE8)。 为了更好的代码结构，我在本教程中使用了 ，但您可以在最后找到编译后的 CSS。 ### 截屏： ##Checkboxes 和 radios 我为我的代码使用前缀，所以我不必担心覆盖第三方代码。 我在这个例子中使用fh- ，但当然你可以使用你自己的。 由于复选框和收音机的样式几乎相同，我将它们放在一起以避免代码重复。 为了更好的可读性，我只显示属于当前步骤的代码，并将其余代码替换为// ... 。 你可以在最后找到完整的代码。 让我们开始