能直接用在表格里的 input[type="radio"]，但需同时加 -webkit-appearance: none 和 -moz-appearance: none 以兼容 Safari 和 Firefox；表格本身不影响 appearance 生效，但 td 的默认 padding、vertical-align、line-height 易导致错位或热区缩小。
appearance: none 能不能直接用在表格里的 input[type="radio"]
能，但必须加 -webkit-appearance: none 和 -moz-appearance: none，否则 Safari 和 Firefox 会忽略它。表格本身不影响样式生效，但表格单元格（<td>）的默认 padding、vertical-align、line-height 容易让单选框错位或点击热区变小——这不是 appearance 的问题，而是布局干扰。
为什么 appearance: none 后单选框“消失了”或点不了
移除原生外观后，浏览器不会自动给控件分配尺寸，width 和 height 必须显式设置，否则它塌缩成一个不可见、不可点的点。常见错误包括：
- 只写
appearance: none，没补width/height - 用了
display: none或opacity: 0隐藏原生控件——这会破坏可访问性，屏幕阅读器无法识别，且键盘 Tab 会跳过 - 在
<table>中直接对input设vertical-align: middle无效，得靠父级<td>控制对齐
怎么用 label + ::before 实现真正可用的自定义单选框
这是目前最稳的方案：保留原生 input 的功能和语义，用 label 扩展热区，再通过伪元素画圆点。关键点：
-
input用position: absolute移出文档流 +opacity: 0（不是display: none），确保仍可聚焦、可读、可键盘操作 -
label必须包裹input或用for属性关联，否则点击无效 -
label::before画外圈，input:checked + label::after画内点（注意是相邻选择器，不是子元素） - 表格中建议给
<td>加padding: 4px 8px，避免自定义圆点贴边
示例片段：
立即学习“前端免费学习笔记（深入）”；
td input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
td label {
display: inline-flex;
align-items: center;
cursor: pointer;
padding-left: 24px;
position: relative;
}
td label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
}
td input[type="radio"]:checked + label::after {
content: "";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #007bff;
border-radius: 50%;
}
accent-color 改不了形状，别指望它替代 appearance
accent-color 只控制原生控件高亮色（比如选中时的蓝点），不改变大小、形状、边框或动画，且 Chrome 111+、Firefox 113+ 才支持，IE/Edge Legacy 完全无效。它适合快速换色场景，但如果你要圆角、阴影、过渡动画，或者适配老浏览器，还是得走 appearance: none + 伪元素路线。表格里尤其要注意：accent-color 在 <td> 上设无效，必须作用于 input 本身。
