零技巧自定义单选按钮和复选框

我觉得所有“自定义设计的单选按钮和复选框”中有一半做了两件事

1. 使它们更大
2. 对它们进行着色

我一直认为 SurveyMonkey 有着大块的单选按钮和复选框。事实上，只是快速查看他们的界面，即使是在内部，应用程序也到处使用这些元素

我认为值得注意的是，如果这仅仅是你想要做的，你可能可以用零 CSS 技巧来做到。只需...使它们更大并对它们进行着色。

就像...

input[type="radio"],
input[type="checkbox"] {
  width: 3em;
  height: 3rem;
  accent-color: green;
}

这将使这些元素变得更粗壮并对它们进行很好的着色！

除了（必备的悲伤长号声）在 Safari 中

我们几乎可以用一些非常简单的 CSS 来完成自定义复选框和单选按钮的主要用例。但还没有成功，也就是说，除非你能让自己不去关心 Safari 的 UI（毕竟，它仍然是完全可用的）。

如果你真的需要放弃并选择完全自定义的设计，Stephanie Eckles 可以帮助你

• 纯 CSS 自定义风格的单选按钮
• 纯 CSS 自定义复选框样式

相关新闻，我一直认为“切换”UI 控件是一组 2 个经过逐步增强的单选按钮，但事实证明<button>才是正确的选择，正如Michelle Barker 在这里所述。可惜没有用于滑块切换的原生 UI。