<input type="color">是HTML5标准输入类型，并非独立标签；它渲染为颜色选择器，value恒为7位小写十六进制格式，不支持手动输入、pattern校验、step/min/max属性，且Safari等浏览器兼容性差。
HTML 里没有叫 color 的原生输入框标签
准确说，<input type="color"> 是标准 HTML5 输入类型，不是独立标签。它渲染为一个颜色选择器控件，但行为和普通文本输入差异很大——比如不能手动输入十六进制值（多数浏览器会拦截或重置），也不能用 pattern 校验。
type="color" 的实际表现和兼容性坑
它在 Chrome、Edge、Firefox 桌面端基本可用，但在 Safari（直到 iOS 16.4）长期不支持，iOS 上直接降级为文本框；Android WebView 表现也不统一。更关键的是：
- 用户选中颜色后，
value始终是 7 位小写十六进制格式（如"#ff0000"），哪怕你设初始值是"red"或"#f00"，读取时都会被标准化 - 无法通过
step、min、max控制色域，这些属性对color类型完全无效 - 不触发
input事件的连续变化（只在确认选择后触发一次change）
想支持手动输入 + 可视化选色？得自己组合
纯 <input type="color"> 无法满足“既点选又手输”的需求。常见做法是并排放两个控件，用 JS 同步值：
<input type="color" id="picker"> <input type="text" id="hex" placeholder="#rrggbb">
同步逻辑要点：
立即学习“前端免费学习笔记（深入）”；
- 监听
picker的change事件，把value写入hex - 监听
hex的input事件，校验是否匹配/^#[0-9a-fA-F]{6}$/，合法则同步到picker.value - 注意：赋值给
picker.value时，必须是 7 位格式，否则某些浏览器会静默失败
替代方案：用第三方库还是自建？
如果项目已引入 react-color 或 vanilla-picker 这类库，它们能绕过浏览器限制，支持 HSV 拖拽、透明度、命名色等——但代价是体积增加、样式侵入性强。轻量场景下，更推荐用原生 input[type=color] + 文本框组合，再加一层校验逻辑。容易被忽略的一点是：color 输入框在表单重置（form.reset()）时，会还原为初始 value，而不是默认色（如 #000000），这点和设计预期常有偏差。
