如何设置 HTML 单选按钮的样式：分步指南

HTML 单选按钮是 Web 表单的主要内容，但其默认外观还有很多不足之处。在这篇博文中，我们将介绍我最喜欢的方法之一，即使用 CSS 自定义单选按钮的外观，从而创建更加用户友好且具有视觉吸引力的体验。

让我们从隐藏单选按钮开始！

我们需要首先承认单选按钮跨浏览器样式的局限性。虽然令人沮丧的是我们无法直接设置它们的样式，但我们可以使用变通方法。在此示例中，第一步是隐藏实际的单选按钮输入。我知道这听起来很奇怪，但我们知道我们无法设计它们，所以我们只需要把它们从等式中剔除即可。

但是，这应该以可访问的方式完成，确保它对所有用户仍然有效。这可以通过使用以下一组样式来实现，这些样式在视觉上隐藏内容，同时保留其可用性：

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

创建自定义单选按钮

为了创建单选按钮的自定义外观，我们将利用标签上的::before伪元素以及一些简单的 CSS 来创建我们正在寻找的外观。

对于我们的示例，HTML 如下所示：

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

首先，我们将以下样式添加到标签元素中：

 label { display: inline-flex; align-items: center; }

这将确保一旦我们添加单选按钮样式，它将与标签文本正确垂直对齐。

现在，我们将使用::before伪元素添加模拟单选按钮：

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

此时，我们的东西开始类似于单选按钮列表，但如果我们单击单选按钮，我们将看到什么也没有发生。尽管伪元素在视觉上类似于单选按钮，但它缺乏交互性，因为我们尚未处理选中状态。

处理交互和状态

我们可以使用:checked伪类和标签上的相邻同级选择器来处理已检查状态：

 input[type="radio"]:checked + label { color: black; }

对于内部点，我们可以在伪元素上利用径向渐变：

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

现在，当我们单击这些按钮时，它们的功能非常类似于本机单选按钮。我们可以通过添加一些过渡效果来增强交互：

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

我们不要忘记焦点

为了提高可访问性，我们还需要解决模拟单选按钮的聚焦状态。这次我们需要利用:focus伪类和带有标签的相邻同级选择器：

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

结论

通过遵循这种方法，我们可以创建时尚且易于访问的自定义单选按钮，从而极大地增强用户体验。这些定制的单选按钮不仅看起来比标准单选按钮更好，而且在正确实施时还可以提供更好的反馈和交互。

这是一个非常简单的示例，甚至可能看起来与本机浏览器样式没有太大不同，但关键是，通过此设置，我们几乎可以做任何我们想做的事情。因此，请随意尝试这些样式并使它们适应您的项目设计。

想看看它的实际效果吗？

在下面的代码笔示例中查看演示代码和该技术的示例。如果您有任何问题或想法，请随时发表评论。

请记住，只需一点创意和一些 CSS，您就可以改变 HTML 单选按钮的外观以匹配您的设计，同时保持可访问性和可用性！