tl; dr：

我做了什么。也许您认为很酷？ See code here。

对于阅读的人，请继续。

无线电按钮已经存在了相当长的一段时间，并且作为UI的主食，开发人员通常希望设置它们以更好地匹配其应用程序的主题或样式。自定义无线电按钮的传统方法通常涉及额外的HTML元素或用标签包装无线电输入，并使用:before和:after伪元素。但是，随着现代CSS的进步，我们现在只能使用input元素来对它们进行样式。

传统方法

过去，通常涉及自定义造型无线电按钮：

• 其他html元素（例如div或span）作为覆盖。
• 利用兄弟姐妹选择器与label元素相结合。
• 利用:before和:after伪元素创建自定义设计。

虽然这些方法是尝试且真实的，但它们可能很麻烦，并为DOM增加不必要的重量。

输入元素的伪元素限制

当造型元素（尤其是input）与:before和:after伪元素的限制时，经常被忽略但至关重要的细节。从历史上看，这些伪元素已被广泛用于添加装饰内容或视觉提示中的元素。但是，input元素被“替换为元素”，根据CSS规范，替换元素及其伪元素没有视觉框，因此无法使用:before和:after进行样式或接收生成的内容（请参见here和here）。

这种限制通常会导致设计人员和开发人员求助于解决方案，例如在其他元素内包装input元素或使用与label元素相结合的兄弟姐妹选择器。在这些方法起作用的同时，它们引入了不必要的复杂性，并且会膨胀DOM。

正如我在下面概述的那样，我们倾向于现代CSS，我们完全避开了对这些解决方法的需求。我们采用更精简的方法，专注于输入元素本身，并消除了需要额外的HTML或伪元素的需求。

拥抱现代CSS

现代CSS引入了几种属性和选择器，使样式更加简单，清洁和可维护。

让我们逐步分解新方法：

1.定义颜色变量

使用:root选择器，我们可以定义全局CSS变量。这使得更容易更改配色方案而无需在CSS中搜索和替换值。

当然，您希望与颜色具有什么创造力，取决于您。但是至少您需要4种不同的颜色：

• 边界颜色
• 检查颜色
• 悬停颜色
• 禁用背景颜色

如今，对两种蓝色和两种灰色的音调很常见（就像我在这里一样）。

:root {
  --radio-border-color: #8b8c89;
  --radio-checked-color: #274c77;
  --radio-hover-color: #a3cef1;
  --radio-disabled-bg-color: #d9d9d9;
}

2.基础样式

我们的广播按钮的核心样式。我们使用设置为none的appearance属性来删除广播按钮的默认外观。

input[type="radio"] {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 6px;
  padding: 0;
  border: 2px solid var(--radio-border-color);
  border-radius: 50%;
  appearance: none;
  background-color: transparent;
  outline: none;
}

当然，appearance属性并不是什么新鲜事物。实际上，它实际上有很丰富的历史...

附带任务：出现属性的简短历史

早期和供应商前缀（1990年代末 - 2000年代初）：

在1990年代末和2000年代初，Web浏览器已实施专有属性，以允许自定义表单控件。那个时代以供应商前缀为特征：

• -webkit-appearance用于Webkit浏览器（例如Chrome和Safari）
• -moz-appearance是为Firefox

灰心的使用（2000年代中期）：

到2000年代中期，随着越来越多的开发人员开始探索网络的功能，外观属性的非标准性质已导致其灰心丧气。跨浏览器的不一致意味着网络开发人员通常必须依靠黑客和解决方法。

标准化工作（2000年代末 - 2010年代初）：

到2000年代后期，CSS工作组已经开始讨论外观属性的潜在标准化。已考虑将其纳入CSS UI（用户界面）规范草稿。该属性是在2012年左右在CSS基本用户界面模块3（CSS3 UI）中正式引入的。

现代用法（2010年代中期 - 现在）：

从2010年代中期开始，浏览器开始将其实现与CSS3 UI规范保持一致。供应商前缀的使用开始下降，许多现代浏览器开始支持未修复的外观属性。到2019年，对外观的广泛支持：没有人巩固其作为Web开发人员可靠工具的位置。

现在回到您定期安排的文章。

3.造型检查状态

:not()伪级与:checked结合使用时，用于检查无线电按钮，但没有禁用。我非常喜欢在应用这些样式时使用类似的伪级，而不是让级联的东西覆盖它们。

radial-gradient创建了选定的内圆的外观。我们可以使用直接的CSS绘制该圆圈！

input[type="radio"]:not(:disabled):checked {
  border-color: var(--radio-checked-color);
  background-color: var(--radio-checked-color);
  background-clip: content-box;
  padding: 2px;
  background-image: radial-gradient(
    circle,
    var(--radio-checked-color) 0%,
    var(--radio-checked-color) 50%,
    transparent 60%,
    transparent 100%
  );
}

4.残疾状态的样式

对于禁用状态，我们只需要添加背景颜色，并在可以检查无线电&&禁用的情况下掩盖案例。

input[type="radio"]:disabled {
  background-color: var(--radio-disabled-bg-color);
}

input[type="radio"]:disabled:checked {
  background-image: radial-gradient(
    circle,
    var(--radio-border-color) 0%,
    var(--radio-border-color) 50%,
    transparent 50%,
    transparent 100%
  );
}

涵盖输入的基本状态。现在是时候继续进行互动了。

5.增强悬停效果

@media (hover: hover)媒体查询可确保仅在支持悬停的设备上应用悬停效果，例如台式机。此细节很容易忽略，尤其是如果您最近没有与CSS合作。

@media (hover: hover) {
  input[type="radio"]:not(:disabled):hover {
    background-color: var(--radio-hover-color);
    outline: 6px solid var(--radio-hover-color);
  }
}

6.聚焦指示：可见焦点

:focus-visible伪级是一种现代化的方法，仅在相关时（例如使用键盘导航时）才能设置焦点状态。您不再需要通过向不需要的用户展示焦点戒指来惹恼用户（当然会感到烦恼）。

input[type="radio"]:focus-visible {
  background-color: var(--radio-hover-color);
  outline: 6px solid var(--radio-hover-color);
}

在当前代码中，悬停/焦点都具有相同的样式。不过，您可能并非如此。在选择悬停/焦点环效果的颜色和宽度时，请务必遵循最佳实践。

7.添加完成触摸

改进可以对用户体验产生很大的影响。我们可以添加几件事可以稍微抛光这件事：

平稳的过渡：

轻微的过渡会使状态变化感觉更加自然。

input[type="radio"] {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 6px;
  padding: 0;
  border: 2px solid var(--radio-border-color);
  border-radius: 50%;
  appearance: none;
  background-color: transparent;
  outline: none;
+ transition: outline 0.1s;
}

微妙的缩放：

缩放的提示可以指示相互作用，只要它不是过高的。

@media (hover: hover) {
  input[type="radio"]:not(:disabled):hover {
    background-color: var(--radio-hover-color);
    outline: 6px solid var(--radio-hover-color);
+   transform: scale(1.05);
  }
}

input[type="radio"]:focus-visible {
  background-color: var(--radio-hover-color);
  outline: 6px solid var(--radio-hover-color);
+ transform: scale(1.05);
}

尊重用户的喜好：

使用首选减少运动媒体查询，我们确保我们的设计尊重喜欢减少运动的用户。

@media (prefers-reduced-motion: reduce) {
  input[type="radio"] {
    transition: none;
  }

  input[type="radio"]:focus-visible {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
  input[type="radio"]:not(:disabled):hover {
    transform: scale(1);
  }
}

这就是代码。

您可以找到full code here（如果您使用SCSS或一些带有嵌套样式的预处理程序，但它仅短4行，那么谁需要它？）。

自定义广播按钮样式的可访问性注意事项

在网页设计的世界中，美学经常是中心舞台。但是，非常重要的是，我们的设计不仅具有视觉吸引力，而且还可以容纳所有人，包括残疾人。确保您的定制元素保持用户友好且符合可访问性标准既是责任，也是出色的网络设计的标志。

如果您想使用我的方法或使用任何其他自定义的广播按钮实现。

对比

确保您选择的颜色满足Web内容可访问性指南（WCAG）设置的最小对比度。诸如Webaim颜色对比检查器之类的工具可以帮助评估您的颜色选择。

标签关联

用标签包装输入，以增加可点击/可敲击区域，从而使每个人更容易，尤其是有运动障碍的用户。确保标签包含描述性文本，清楚地表明了单个单选按钮代表的选择。

<label>
  <input type="radio" name="choice" value="option1" />
  Descriptive Option Text
</label>

聚焦样式

自定义广播按钮使用:focus-visible在收音机聚焦时显示出独特的样式。至关重要的是要确保焦点样式清晰可见，以帮助仅键盘用户导航和进行选择。

大小事项

根据WCAG的建议，可单击/可敲击区域的最小尺寸为44x44像素。这种尺寸不仅对有运动障碍的用户有益，而且可以改善移动用户的体验。这些样式中的当前大小仅为20x20像素，因此您需要将label包装至input至少44x44像素。

对动画明智

虽然微妙的过渡和动画（例如缩放）可以增强用户体验，但避免过度复杂或分散动画。一些用户对运动敏感。始终为设定减少运动的用户提供一份条款。

语义HTML

确保HTML结构是语义。虽然样式很重要，但保持诸如input和label等元素的语义完整性确保辅助技术可以有效地解释和传达内容。当然，您始终可以aria-hidden="true"进行不必要的标记，但是更多代码===更多维护开销&&更多您将运送到用户的浏览器中，因此可以考虑。

咏叹调属性

虽然本机HTML元素在正确使用时，通常不需要其他咏叹调属性，但请始终在寻找可能增强可访问性的方案。例如，如果您有一组广播按钮，则可以将组包裹在fieldset中，其中legend描述了集合。

测试

当然，最好与真实用户（包括依靠辅助技术的人）一起测试您的设计。手动测试虽然耗时，但通常会遇到自动化工具。

分开的话

Modern CSS提供了一种更清洁，更精简的方法来自定义无线电按钮，而无需额外的HTML或Recleded CSS。拥抱这些技术可以有效，可维护和用户友好的设计。

始终考虑为什么首先要创建一个自定义的广播按钮。如果原因是为用户提供更好的体验，请确保考虑所有用户；考虑可访问性。通过从一开始就专注于可访问性，设计师和开发人员可以确保所有用户的包容性网络体验，无论其能力如何或如何访问内容。

，如果改善用户体验确实是您的目标，请确保使事情保持绩效。我认为我们在这里或其他任何东西都没有真正优化。这是一个简单的代码，意味着更少的错误，较少的字节向下发送的字节，希望在阅读此内容后，在您的应用程序或设计系统中的JS中更少的CSS。