HTML5原生需写为，值必须是7位带#的十六进制色值；支持Chrome、Edge、Firefox≥117、Safari≥16.4；监听颜色变化应使用input事件而非change事件；不支持时需通过特性检测降级。
HTML5 原生
直接写 就能渲染出系统级颜色选择器，点击后弹出原生拾色面板。它在 Chrome、Edge、Firefox（≥117）、Safari（≥16.4）中可用，但 Safari 旧版本和部分安卓 WebView 不支持。
注意：该控件默认值必须是 7 位十六进制格式（如 "#ff6b35"），写成 "ff6b35" 或 "rgb(255,107,53)" 会导致回退为文本输入框，且无任何提示。
-
value必须带#，且长度严格为 7 字符（不支持缩写如#f63） - 不支持设置透明度（
rgba或hsla都无效） - 无法自定义面板样式或添加“透明”“无色”选项
监听颜色变化要用 input 事件，不是 change
input 事件在每次用户拖动滑块、点击色盘或手动编辑 hex 值时立即触发；而 change 只在失去焦点时触发一次 —— 对实时预览场景来说，后者会明显卡顿或遗漏中间状态。
const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('input', (e) => {
const hex = e.target.value; // 永远是 #rrggbb 格式
document.body.style.backgroundColor = hex;
});
别忘了加防错：某些低版本浏览器可能把 type="color" 当作 text 渲染，可先检测支持性：if (colorInput.type === 'color') 再绑定逻辑。
立即学习“前端免费学习笔记（深入）”；
不兼容时怎么优雅降级为第三方拾色器
当检测到 input[type="color"] 不被支持（比如 iOS Safari 微信内置浏览器、部分安卓 UC），建议用轻量库如 vanilla-picker 或 jscolor 替代，而不是手写 HSV 色盘。
- 优先选纯 JS、无依赖、支持 IE11+ 的方案（如
vanilla-picker@2） - 初始化前隐藏原生控件，用
占位 - 确保降级后返回值格式统一（例如始终输出
#rrggbb，避免上层业务逻辑分支）
别硬塞 CSS 覆盖原生控件 —— 它们底层渲染机制不同，强行样式干预容易失效或破坏可访问性。
移动端真机调试时常见坑
在 iOS Safari 或微信里测试，常遇到点不动、点击区域小、颜色选中后不更新 value 的问题。根本原因是：部分 WebView 把 input[type="color"] 渲染为只读文本框，且不触发 input 事件。
- 真机必须用
devicePixelRatio > 1的屏幕实测，模拟器不可靠 - 微信 Android 最新版已支持，但 iOS 微信仍使用 WKWebView 旧内核（≈ Safari 15），需降级
- 不要给该控件设
pointer-events: none或包裹在label中再加for属性 —— 这会干扰原生唤起逻辑
最稳妥的做法：服务端 UA 判断 + 客户端特性检测双保险，对明确不支持的环境，一开始就加载降级方案。
