推荐使用 label + input[type="number"] + span 组合布局实现右侧单位，语义清晰、可访问性强、兼容性好；次选 input[type="text"] 加数字校验，但需手动处理输入逻辑与单位剥离。
input type="number" 无法直接显示右侧单位
浏览器原生 input type="number" 不支持在输入框内叠加单位（如 “kg”、“px”、“%”），强行用 ::after 伪元素或绝对定位盖文字，会导致点击区域错位、iOS 键盘不弹出、无障碍阅读器读取异常。这不是样式问题，是语义和交互限制。
常见错误现象：
– 单位文字被遮挡或点击失效
– 用户输入时单位突然跳动或消失
– 屏幕朗读器只读数字，不读单位，违反 WCAG
- 真正可用的方案只有两种：组合标签布局（推荐）或用
input type="text"+ 数字校验 - 别试图用
placeholder写单位（例如placeholder="100 kg"），它只是提示，不是实时单位，且用户输入后就没了 - 不要给
input[type=number]设width后硬塞单位进同一行容器——flex 布局容易在 Safari 下换行错乱
用 label + input + span 组合实现“视觉右侧单位”
这是最稳定、可访问、无兼容性风险的做法：把单位放在独立 span 中，与 input 同级并列，用 CSS 控制对齐。语义清晰，屏幕阅读器能分别读出“数值”和“单位”，键盘导航也自然。
使用场景：表单中需要明确物理/业务单位的字段，如体重、宽度、折扣率、字号等
立即学习“前端免费学习笔记（深入）”；
- HTML 结构必须保持
label包裹input和单位span，否则for/id关联会断裂 - CSS 推荐用
display: flex; align-items: center;，避免float或负 margin —— 后者在缩放页面时极易错位 - 单位
span加aria-hidden="true"是冗余操作，反而可能干扰读屏；正确做法是让单位文本保留在 DOM 流中，由label的隐式关联自然覆盖
<label> <span>字体大小</span> <input type="number" name="font-size" value="16"> <span>px</span> </label>
type="text" + 输入限制也能满足需求，但要补校验
如果必须让单位始终“粘”在输入框右侧（比如设计稿强求视觉融合），改用 input type="text" 是唯一可行路径。但它失去原生数字键盘（移动端）、上下箭头、min/max 限制等能力，必须手动补全。
性能影响小，但逻辑负担明显上升：你需要监听 input、blur、keydown 三类事件，过滤非数字字符，同时允许小数点、负号（视场景而定）
- 禁止用
pattern属性做实时校验 —— 它只在提交时触发，无法阻止非法输入 - 关键参数差异：
step="any"对type="text"无效；单位字符串（如 "14.5em"）需用 JS 正则提取数字部分再转parseFloat() - 容易踩的坑：用户粘贴带单位的文本（如 “12px”）后，没清空单位就提交，后端收到字符串而非数字 —— 必须在
blur时剥离单位并验证有效性
单位位置固定但需响应式适配时的注意点
当页面要适配手机横屏、小屏折叠设备时，“右侧单位”可能挤占输入空间，导致数字截断或换行。这不是 bug，是弹性布局的正常表现。
兼容性影响集中在 iOS Safari：它对 input[type=number] 的内部渲染高度控制较死，加了单位容器后，若未显式设 line-height 和 padding，会出现上下不对齐
- 解决办法不是加大
height，而是统一设置box-sizing: border-box+ 显式padding，让所有浏览器按相同盒模型计算 - 单位
span字体大小建议用em或rem，避免固定px导致缩放后比例失调 - 真正在意小屏体验？不如在
@media (max-width: 480px)下把单位移到input下方，用flex-direction: column—— 比硬撑一行更可靠
