能直接用在表格里的 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 容易让单选框错位或点击热区变小——这不是 <code>appearance 的问题，而是布局干扰。

为什么 appearance: none 后单选框“消失了”或点不了

移除原生外观后，浏览器不会自动给控件分配尺寸，width 和 height 必须显式设置，否则它塌缩成一个不可见、不可点的点。常见错误包括：

• 只写 appearance: none，没补 width/height
• 用了 display: none 或 opacity: 0 隐藏原生控件——这会破坏可访问性，屏幕阅读器无法识别，且键盘 Tab 会跳过
• 在 <table> 中直接对 <code>input 设 vertical-align: middle 无效，得靠父级 <td> 控制对齐 <h3>怎么用 label + ::before 实现真正可用的自定义单选框</h3> <p>这是目前最稳的方案：保留原生 <code>input 的功能和语义，用 label 扩展热区，再通过伪元素画圆点。关键点：
  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • input 用 position: absolute 移出文档流 + opacity: 0（不是 display: none），确保仍可聚焦、可读、可键盘操作
  • label 必须包裹 input 或用 for 属性关联，否则点击无效
  • label::before 画外圈，input:checked + label::after 画内点（注意是相邻选择器，不是子元素）
  • 表格中建议给 <td> 加 <code>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> 上设无效，必须作用于 <code>input 本身。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！