CSS :checked伪类实战：自定义单选/复选框

自定义单选/复选框样式的核心在于利用css的:checked伪类控制相邻label样式。1. html结构上确保input与label关联，用for和id属性绑定或嵌套；2. 隐藏原生控件推荐使用opacity: 0等不影响可访问性的方法；3. 使用label内的span元素绘制自定义样式；4. 利用:checked状态结合相邻兄弟选择器改变指示器外观；5. 提供焦点状态提升键盘导航体验。此外，需兼顾可访问性，包括正确关联label与input、避免display:none、添加aria属性等，从而实现视觉统一、交互优化且无障碍兼容的控件设计。

自定义浏览器默认的单选/复选框样式，核心在于巧妙利用CSS的:checked伪类。我们通常会隐藏掉浏览器自带的丑陋控件，然后通过:checked状态，去控制其相邻的label元素或者其他兄弟元素的样式，从而模拟出我们想要的视觉效果。这不仅让界面风格统一，也让用户体验更顺滑。

解决方案

要实现自定义单选/复选框，通常的思路是：

1. HTML结构： 确保input元素和它的label标签是紧密关联的，最好是label包裹input，或者input紧邻label，并用for和id属性关联起来。这是为了点击label也能触发input的选中状态，同时对可访问性也至关重要。

   立即学习“前端免费学习笔记（深入）”；

   <!-- 单选框示例 -->
   <div class="custom-radio">
       <input type="radio" id="option1" name="choice" value="1">
       <label for="option1">
           <span class="radio-indicator"></span>
           选项一
       </label>
   </div>
   
   <!-- 复选框示例 -->
   <div class="custom-checkbox">
       <input type="checkbox" id="featureA" name="features" value="A">
       <label for="featureA">
           <span class="checkbox-indicator"></span>
           功能A
       </label>
   </div>

2. 隐藏原生控件： 不要直接使用display: none;或visibility: hidden;，因为那样会影响屏幕阅读器。更推荐的做法是将其视觉上隐藏但保持可访问性，比如：

   

   input[type="radio"],
   input[type="checkbox"] {
       /* 视觉上隐藏，但保留可访问性 */
       opacity: 0;
       position: absolute;
       width: 1px;
       height: 1px;
       overflow: hidden;
       clip: rect(0 0 0 0); /* 裁剪掉 */
       white-space: nowrap; /* 不换行 */
       border: 0;
       padding: 0;
       margin: 0; /* 确保不占用空间 */
   }

   或者简单点，如果你的设计允许，直接position: absolute; left: -9999px;也行。

3. 样式化自定义指示器： 利用label内部的span（这里是.radio-indicator和.checkbox-indicator）来绘制我们想要的单选/复选框样式。

   .radio-indicator,
   .checkbox-indicator {
       display: inline-block;
       width: 18px;
       height: 18px;
       border: 2px solid #ccc;
       border-radius: 50%; /* 单选框 */
       vertical-align: middle;
       margin-right: 8px;
       transition: all 0.2s ease-in-out;
       box-sizing: border-box; /* 确保边框不撑大 */
       position: relative; /* 用于内部的选中标记 */
   }
   
   .checkbox-indicator {
       border-radius: 4px; /* 复选框 */
   }

4. 利用:checked伪类改变状态： 当input被选中时，通过+（相邻兄弟选择器）或~（通用兄弟选择器）来选中label或其内部的指示器，并改变其样式。

   /* 单选框选中状态 */
   input[type="radio"]:checked + label .radio-indicator {
       border-color: #007bff;
       background-color: #007bff;
   }
   input[type="radio"]:checked + label .radio-indicator::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 8px;
       height: 8px;
       background-color: #fff;
       border-radius: 50%;
   }
   
   /* 复选框选中状态 */
   input[type="checkbox"]:checked + label .checkbox-indicator {
       border-color: #28a745;
       background-color: #28a745;
   }
   input[type="checkbox"]:checked + label .checkbox-indicator::after {
       content: '';
       position: absolute;
       top: 3px;
       left: 6px;
       width: 4px;
       height: 8px;
       border: solid white;
       border-width: 0 2px 2px 0;
       transform: rotate(45deg);
   }
   
   /* 焦点状态，提升可访问性 */
   input[type="radio"]:focus + label .radio-indicator,
   input[type="checkbox"]:focus + label .checkbox-indicator {
       box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
   }

   这里用::after伪元素来绘制单选框的圆点和复选框的打钩。

为什么我们需要自定义浏览器默认的单选/复选框样式？

说实话，浏览器默认的单选/复选框样式，在很多现代设计语境下，显得有点格格不入。它们在不同浏览器、不同操作系统下的表现差异很大，这导致了UI界面的不一致性。想象一下，你的设计稿是精致的，但一到实际页面上，那些系统自带的控件就跳出来“破坏”了整体美感，这多让人抓狂啊。

靠岸学术

一款集翻译，阅读，文献管理于一体的英文文献阅读器

下载

所以，自定义样式首先是为了视觉统一和品牌识别。无论是你的公司品牌色，还是特定的圆角、阴影效果，通过自定义，你可以把这些细节融入到每一个交互元素中。其次，它能带来更好的用户体验。默认控件往往尺寸较小，点击区域不明显，而自定义后，我们可以根据设计需要放大尺寸，增加可点击区域，甚至加入一些微动效，让用户操作起来更舒适、反馈更明确。最后，别忘了可访问性。虽然我们隐藏了原生控件，但只要结构正确（label和input的关联），屏幕阅读器依然能正确识别并播报，确保了所有用户都能无障碍地使用。这不仅仅是美观问题，更是用户体验和产品专业度的体现。

除了 :checked 伪类，还有哪些常见的自定义方法？它们有什么优缺点？

当然，:checked伪类是CSS-only实现自定义最优雅、性能最好的方式之一，但它也不是唯一的路子。

一种常见的方法是完全基于JavaScript来控制。你可能见过一些库，它们通过JS来监听原生input的change事件，然后动态地给自定义元素添加或移除类名，再通过CSS来控制这些类名的样式。这种方法的优点是灵活性极高，可以实现非常复杂的交互逻辑和动画效果，甚至可以完全脱离原生的input元素，自己构建一套自定义组件。但缺点也很明显：增加了JS的依赖，如果JS加载失败或被禁用，你的控件就可能无法正常工作；性能上，相较于纯CSS也会有轻微的损耗；而且，对于简单的样式修改，引入JS显得有些“杀鸡用牛刀”了。

另一种思路是使用SVG或字体图标来作为选中状态的指示器。这通常是与:checked伪类结合使用的。比如，你可以用一个SVG图标来代替::after伪元素绘制的勾或圆点。优点是图标的缩放和颜色控制更灵活，矢量图保证了在任何分辨率下的清晰度。缺点是需要额外引入SVG文件或字体文件，增加了资源加载的开销，对于特别简单的形状，可能不如纯CSS伪元素来得轻量。

总的来说，对于单选/复选框这种状态相对简单的控件，:checked伪类结合相邻兄弟选择器，是目前最推荐的方案。它纯CSS实现，性能优异，语义化好，且易于维护。其他方法更多是在特定场景（如需要复杂动画、或已经有JS框架支持）下的补充或替代。

在自定义单选/复选框时，如何兼顾可访问性（Accessibility）？

可访问性在自定义控件时绝对是重中之重，否则你的漂亮控件可能对一部分用户来说就是“隐形”的。

首先，确保label与input的正确关联。这是基础中的基础。通过label的for属性指向input的id，或者直接将input嵌套在label内部。这样做的好处是，用户点击label区域也能触发input的选中/取消选中，扩大了可点击区域，也让屏幕阅读器能够正确识别这个控件的语义。

其次，隐藏原生input的方式要讲究。我们前面提到的opacity: 0; position: absolute; width: 1px; height: 1px; overflow: hidden;等组合，就是为了让原生input在视觉上不可见，但仍然存在于DOM中，并且可以被屏幕阅读器感知到。避免使用display: none;或visibility: hidden;，因为这会彻底将元素从可访问性树中移除，屏幕阅读器就无法读到它了。

再者，提供清晰的焦点状态。当用户使用键盘（Tab键）导航时，自定义的单选/复选框应该有一个明显的视觉焦点指示。这通常通过input:focus + label .custom-indicator来设置，比如添加一个box-shadow或改变边框颜色。这能告诉键盘用户当前哪个元素处于激活状态，是他们操作的目标。

最后，对于更复杂的自定义控件，可能需要考虑使用ARIA属性（Accessible Rich Internet Applications）。例如，aria-checked可以明确告诉屏幕阅读器当前复选框的选中状态（true或false），aria-labelledby或aria-describedby可以提供更详细的描述信息。不过，对于标准的单选/复选框，只要HTML结构和隐藏方式正确，浏览器通常会自动处理好大部分ARIA语义，无需过度干预。关键在于，始终站在用户的角度思考：如果我看不见屏幕，我能理解这个控件是什么、它当前的状态是什么、我能怎么操作它吗？