伪类 :checked 的工作原理与单选框基本结构
在 CSS 中，:checked 是一种用于匹配处于选中状态的表单控件的伪类。它能帮助你在用户选择一个选项后触发一组样式变化，从而实现直观的选中反馈。对单选框而言，这个状态只在被选中的那个选项上成立，因此你可以据此对视觉效果进行切换。选中状态与 边框、背景变更等视觉效果紧密相关。
实现单选框的基本结构时，通常通过相同的 name 属性 将若干个 input 绑定成同一组，并由浏览器在同组中确保只有一个选中。互斥选择这是单选框的核心行为，便于用户快速做出唯一的决策。
为了让选中的状态产生明显的视觉反馈，建议把能点击的交互区域放在 label 上，因为 label 支持点击行为并且对屏幕阅读器友好。通过把输入隐藏或保持可访问性，可以让页面保持整洁的外观同时兼具可访问性。
通过相邻兄弟选择器实现选中样式的边框与背景变化
要利用 :checked 动态改变边框与背景，一个常见的结构是将原生单选框隐藏，并让紧随其后的 label 展现为可视的选项按钮。这种做法能在保持原生行为的同时实现自定义外观。
通过使用相邻兄弟选择器 (A + B) 当输入被选中时，将样式应用到紧邻的 label 上，例如：input:checked + label 的样式会在选中时生效。
需要注意的是，为了保留可点击性和无障碍性，通常只是在视觉上隐藏原生单选框（通过 CSS），而让 label 充当可点击的控件。要确保焦点和键盘导航仍然正常。
/* 隐藏原生单选框，并让 label 成为可点击区域 */
.option-group input[type="radio"] {position: absolute;opacity: 0;width: 0;height: 0;margin: 0;
}/* 未选中状态下的标签样式 */
.option-group .option {display: inline-block;padding: 10px 14px;border: 2px solid #ccc;border-radius: 6px;background: #fff;cursor: pointer;transition: all 0.2s ease;user-select: none;
}/* 选中时应用到紧邻的 label 上 */
.option-group input[type="radio"]:checked + label.option {border-color: #1e88e5;background: #e6f0ff;box-shadow: 0 0 0 3px rgba(30,136,229,.15);
}
完整示例：HTML 结构与样式
以下提供一个完整的示例，包含 HTML 结构与对应的 CSS 样式，能在页面中直接实现单选框选中时的边框与背景变化效果。通过清晰的结构和注释，便于理解在实际项目中的应用方式。
完整示例的核心要点包括：将单选框隐藏、让 label 成为可点击元素、使用 :checked 状态来驱动视觉变化、确保标签之间的间距和可读性，以及保留键盘导航的可用性。
单选框伪类:checked 示例
/* 该 CSS 与上面的 HTML 配合使用，将实现选中时的边框与背景变化 */
.option-group input[type="radio"] {position: absolute;opacity: 0;width: 0;height: 0;
}
.option-group .option {display: inline-block;padding: 10px 14px;border: 2px solid #ccc;border-radius: 6px;background: #fff;cursor: pointer;margin-right: 8px;transition: all 0.2s ease;
}
.option-group input[type="radio"]:checked + label.option {border-color: #1e88e5;background: #e6f0ff;box-shadow: 0 0 0 3px rgba(30,136,229,.15);
}
.option-group input[type="radio"]:focus + label.option {outline: 2px solid #333;outline-offset: 2px;
}
无障碍性与兼容性考虑
在实现基于 :checked 的选中样式时，无障碍性至关重要。尽量确保 label 能清晰地描述选项含义，并且通过 for 属性将标签与输入正确关联，以便屏幕阅读器能够正确读取。
即使隐藏了原生单选框，仍应保留键盘焦点的可访问性。可通过在 label 上或紧邻的区域上设置焦点样式来实现，确保使用键盘按键切换时仍有明确的视觉反馈。
进阶技巧：自定义控件外观与过渡效果
通过在选中与未选中状态之间应用过渡动画，可以让交互显得更平滑自然。将 transition 属性应用到按钮样式上，当 :checked 改变时，边框颜色、背景以及阴影等属性会以动画形式过渡。
若要实现更丰富的自定义控件外观，可以结合伪元素（如 ::before、::after）来绘制自定义勾选标记、圆点等视觉元素，同时保持对屏幕阅读器的可访问性。
