用原生HTML+CSS实现尺码选择器：以包裹与，通过:checked、:disabled等伪类控制视觉状态，确保键盘导航、屏幕阅读器支持及表单原生能力。
怎么用原生 HTML + CSS 实现可点击、可禁用、带状态反馈的尺码选择器
纯 HTML 能做的有限，但配合少量 CSS 和语义化结构，已经能覆盖绝大多数电商场景下的尺码选择需求。关键不是“炫技”，而是让 <input type="radio"> 或 <button></button> 在视觉和交互上真正像一个尺码卡片——有选中态、禁用态、焦点反馈，且不依赖 JS 也能工作。
常见错误是直接堆 <div> + <code>onclick，结果无法键盘操作、屏幕阅读器不可读、禁用逻辑混乱。正确做法是：用 <fieldset></fieldset> 包裹一组 <input type="radio">，每个配 <label></label>，再用 CSS 隐藏原生单选框，重绘样式。
- 必须给
<fieldset></fieldset>加role="radiogroup"（辅助技术更可靠） -
<input>必须有name（同组互斥）、id（绑定 label）、value（提交值） - 禁用某尺码？直接给对应
<input>加disabled属性，CSS 用:disabled控制样式，别用data-status="unavailable"自己模拟 - 默认选中？加
checked，不要靠 JS 设置
为什么不用 <button></button> 而坚持用 <input type="radio">
因为表单提交和状态管理成本完全不同。<button></button> 看似自由，但你要自己维护“当前选中哪个”、处理键盘方向键、同步 disabled 状态、保证 form.reset() 时恢复初始值——这些 <input type="radio"> 原生就支持。
真实场景中，尺码往往只是订单表单的一部分，后面还跟着颜色、数量、地址。混用 <button></button> 和 <input> 会让后端接收逻辑割裂（比如收到 size=XL 却收不到 color，因为 button 不参与表单序列化）。
- 如果必须用
<button></button>（比如要嵌套 SVG 图标），务必加type="button"并手动绑定aria-checked、aria-disabled，否则对键盘用户极不友好 -
<input>的value应该是后端可直接消费的值（如"M"、"42EU"），而不是中文显示文本（如"中号"） - 浏览器原生 radio 组在按空格/回车时自动切换选中，方向键可遍历——这个体验不能丢
:checked 和 :disabled 的 CSS 写法容易踩哪些坑
核心原则：样式控制权交给伪类，别用额外 class 模拟状态。否则 JS 更新 class 时容易漏掉某个状态组合（比如同时 disabled + checked）。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
input[type="radio"] + label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border: 2px solid #ddd;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
input[type="radio"]:checked + label {
border-color: #007bff;
background: #007bff;
color: white;
}
input[type="radio"]:disabled + label {
border-color: #e9ecef;
color: #adb5bd;
cursor: not-allowed;
}
input[type="radio"]:disabled:checked + label {
background: #e9ecef;
color: #6c757d;
}
注意最后一条：input[type="radio"]:disabled:checked + label 必须显式声明，否则会被前面的 :checked 规则覆盖（因为 specificity 相同，后声明者生效，但 disabled 状态下你通常不希望它高亮）。
- 别用
opacity: 0.5表示 disabled —— 它会让文字可读性下降，且不满足 WCAG 对对比度的要求 - 焦点样式（
:focus-within或input:focus + label）必须保留，否则键盘用户不知道当前聚焦在哪 - 移动端点击区域至少 44×44px，用
padding扩展，别只靠字体大小撑开
响应式布局下尺码卡片如何避免换行错乱
尺码选项数量不确定（S/M/L 或 34/35/36/37…），用 flex-wrap 是最稳妥的，但要注意容器宽度和子项最小宽度的博弈。
错误写法：label { flex: 1; } —— 在窄屏下会把所有卡片压成一条细线，文字换行混乱。
- 推荐用
display: flex; flex-wrap: wrap; gap: 8px;，然后给label设flex: 0 1 auto;（不放大、可缩小、内容自适应） - 为防止超长尺码（如
"XXL (Plus Size)"）撑破容器，加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但仅限英文或短中文；中文多字建议用响应式 font-size 或截断逻辑 - 小屏（
max-width: 480px）下可强制单列：flex-direction: column;，并增大gap提升可点性
最常被忽略的是：当尺码列表为空（API 返回 []）时，别留一个空 <fieldset></fieldset>，应该用 CSS :empty 隐藏，或服务端直接不渲染整个区块。留空容器会导致 tab 键焦点悬停在不可见区域，用户困惑。
