HTML 单选按钮是 Web 表单的主要内容，但其默认外观还有很多不足之处。在这篇博文中，我们将介绍我最喜欢的方法之一，即使用 CSS 自定义单选按钮的外观，从而创建更加用户友好且具有视觉吸引力的体验。   https://youtu.be/PlldXyuTnUw?embedable=true 让我们从隐藏单选按钮开始！ 我们需要首先承认单选按钮跨浏览器样式的局限性。虽然令人沮丧的是我们无法直接设置它们的样式，但我们可以使用变通方法。在此示例中，第一步是隐藏实际的单选按钮输入。我知道这听起来很奇怪，但我们知道我们无法设计它们，所以我们只需要把它们从等式中剔除即可。 但是，这应该以可访问的方式完成，确保它对所有用户仍然有效。这可以通过使用以下一组样式来实现，这些样式在视觉上隐藏内容，同时保留其可用性：   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; } 创建自定义单选按钮 为了创建单选按钮的自定义外观，我们将利用标签上的 伪元素以及一些简单的 CSS 来创建我们正在寻找的外观。 ::before 对于我们的示例，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 单选按钮的外观以匹配您的设计，同时保持可访问性和可用性！   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

如何将您的工作流程提高 10 倍：17 个必备应用程序

架构师指南：构建 AI/ML 数据湖参考架构

Telegram：加密岛通往大陆的桥梁

创建以用户为中心的加密产品：客户反馈的重要性

如何将您的工作流程提高 10 倍：17 个必备应用程序

架构师指南：构建 AI/ML 数据湖参考架构

Telegram：加密岛通往大陆的桥梁

创建以用户为中心的加密产品：客户反馈的重要性

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps