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

比特币 UTXO 模型，为独特的生态系统提供动力

成功云迁移的完整指南：策略和最佳实践

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

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

比特币 UTXO 模型，为独特的生态系统提供动力

成功云迁移的完整指南：策略和最佳实践

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

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps