paint-brush
如何设置 HTML 单选按钮的样式:分步指南经过@briantreese
899 讀數
899 讀數

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

经过 Brian Treese4m2024/02/13
Read on Terminal Reader

太長; 讀書

HTML 单选按钮是 Web 表单的主要内容,但其默认外观还有很多不足之处。在这篇博文中,我们将介绍我最喜欢的一种使用 CSS 自定义单选按钮外观的方法。我们将利用标签上的 `::before` 伪元素以及一些简单的 CSS 来创建我们正在寻找的外观。
featured image - 如何设置 HTML 单选按钮的样式:分步指南
Brian Treese HackerNoon profile picture

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 单选按钮的外观以匹配您的设计,同时保持可访问性和可用性!