用 <input type="text"> 实现警告样式需同时设置 border: 2px solid #ffeaa7、background-color: #fff3cd 和 color: #856404，配合 padding、border-radius: 2–4px、outline: none 与 box-shadow 聚焦效果，并必须配 <label> 保证可访问性。
怎么用 <input> 实现带警告样式的文本框
直接给 <input type="text"> 加 CSS 就能实现，不需要 JS 或额外标签。关键是用 border、background-color 和 color 组合出“警告感”，而不是依赖图标或伪元素——后者在部分老浏览器或屏幕阅读器中可能不可靠。
常见错误是只改边框颜色（比如只设 border: 2px solid #ff6b35），但没调背景和文字色，导致在深色主题下看不清，或与表单其他字段对比度过低。
- 推荐用
#fff3cd作背景色（Bootstrap 的 warning-bg），搭配#856404文字色和#ffeaa7边框色，视觉上明确传达“需注意” - 加
padding和border-radius提升可点击区域和现代感，但别设border-radius: 4px以上——圆角太大会削弱警告的紧迫感 - 务必设置
outline: none并用box-shadow替代聚焦样式，否则键盘用户 tab 进来时默认 outline 可能被覆盖，造成可访问性问题
required + :invalid 自动触发警告样式是否可靠
可以，但有明显限制：只有用户提交表单后，或输入内容被浏览器判定为无效（如邮箱格式不对）时，:invalid 才生效；空值且 required 时，初始加载页面不会立刻显示警告样式。
这意味着纯靠 :invalid 无法实现“默认就强调需填写”的场景——比如一个必填项，你希望它一打开就带警告框，而不是等用户点提交才变色。
立即学习“前端免费学习笔记（深入）”；
- 若要“始终警告”，必须用 class 控制，例如
<input class="warning-input">，再写对应 CSS - 若想“提交后校验+高亮”，可结合
form.addEventListener('submit', ...)主动加 class，比纯 CSS 更可控 -
:invalid对自定义校验（如手机号长度、密码强度）无效，这些必须用setCustomValidity()配合 JS 触发
警告文本框该不该加 <label>
必须加。不加 <label> 的 <input> 在无障碍使用中几乎不可操作——屏幕阅读器无法告知用户这个框是干什么的，键盘用户也无法用 label 点击聚焦。
常见错误是用 placeholder 当 label，或者把提示文字塞进 value 里。placeholder 会消失，value 默认值又容易被用户忽略，都不是替代 label 的方案。
- 用显式绑定：
<label for="warn-input">请确认邮箱地址</label><input id="warn-input" type="text"> - 或隐式包裹：
<label>请确认邮箱地址<input type="text"></label>，更简洁且语义正确 - 警告文案应写在 label 里（如“⚠️ 邮箱将用于重置密码”），不要只靠样式暗示，避免认知负荷
移动端警告文本框的特殊处理
在 iOS Safari 和部分安卓浏览器中，input 的默认缩放行为会让警告框文字突然变大、错位，尤其当用了 font-size: 1rem 但未声明 viewport 或禁用缩放时。
另一个坑是软键盘弹出后，页面滚动或定位偏移，导致警告框被遮挡——这时仅靠 CSS 无法解决，得靠 JS 监听 focus 事件做滚动补偿。
- 强制禁用缩放风险高，建议用
font-size: 16px（而非 rem/em）+text-size-adjust: 100%更稳妥 - 加
min-height: 44px（iOS 推荐触摸目标最小尺寸），防止小屏点击失焦 - 避免在警告框上设
position: fixed或transform，它们会干扰软键盘的自动滚动逻辑
