单选按钮:checked伪类对原生input无效，因其不可见且浏览器限制样式；应隐藏input，用label+兄弟选择器实现样式切换，并可用::before伪元素自定义圆点。
单选按钮 :checked 伪类为什么没生效
直接写 input[type="radio"]:checked { background: red; } 是无效的——<input> 本身不可见，无法渲染背景、边框等样式。浏览器对原生单选按钮的样式控制极其有限，CSS 不能直接“美化”它的圆点部分。
常见错误是试图给 input 加 border 或 background-color，结果毫无反应。这不是你写错了选择器，而是浏览器根本不支持这些属性作用于原生 radio 元素。
用 label + :checked + label 触发样式切换
核心思路：把可见样式加在关联的 label 上，利用兄弟选择器监听 input:checked 状态变化。
- 确保每个
input有唯一id，对应label的for属性（或用嵌套方式） - 隐藏原生
input（position: absolute; opacity: 0;），保留可交互性 - 给
label添加基础样式（如背景、圆角、内边距），再用input:checked + label覆盖选中态
<input type="radio" name="theme" id="light"> <label for="light">浅色模式</label> <input type="radio" name="theme" id="dark"> <label for="dark">深色模式</label>
input[type="radio"] {
position: absolute;
opacity: 0;
}
label {
display: inline-block;
padding: 8px 16px;
background: #f0f0f0;
border-radius: 4px;
cursor: pointer;
}
input:checked + label {
background: #007bff;
color: white;
}
需要自定义圆点图标？用 ::before 模拟
如果想在文字前显示一个可定制的圆点（比如不同颜色、大小、动画），就不能只靠 label 背景，得用伪元素模拟。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 在
label上加position: relative，为伪元素定位准备 - 用
label::before绘制默认圆点，input:checked + label::before改变其状态 - 注意：必须配合
vertical-align: middle或transform: translateY()对齐文字基线
label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
input:checked + label::before {
background: #007bff;
border-color: #007bff;
}
JavaScript 动态设置选中态时，样式不更新？
用 JS 设置 input.checked = true 后，:checked + label 样式通常能正常响应——但前提是 DOM 结构未被破坏，且没有使用 display: none 隐藏 input（应改用 opacity: 0 或 visibility: hidden）。
- 避免用
input.style.display = "none"，这会让它脱离渲染流，:checked伪类可能失效 - 若用框架（如 React/Vue），确保
input的checked属性与状态同步，不要只改 DOM 属性而忽略受控逻辑 - 调试时可在控制台手动执行
document.getElementById("xxx").checked = true，验证 CSS 是否生效，排除 JS 逻辑干扰
真正容易被忽略的是：伪元素模拟的圆点要和文字保持视觉节奏一致，比如行高变化、字体缩放、暗色模式下颜色对比度是否足够——这些不是一次写完就完事的，得在真实设备上滚动、缩放、切主题反复看。
