原生 在 safari ≤15.3、emui 12、miui 13 等环境下静默降级为文本框或黑块；检测需用 document.createelement('input').type = 'color' 判断返回值是否仍为 "color"。
原生 <input type="color"> 能用，但只适合“点一下选个纯色、不挑体验、不care透明度”的场景；真要进表单、上生产、接设计系统，它大概率会在 Safari 旧版、iOS WebView、MIUI 系统浏览器里静默失效或回退成黑块。
为什么 input[type="color"] 点开没反应或变文本框
不是代码写错了，是浏览器根本不认这个类型。Safari ≤15.3、部分安卓定制 WebView（如 EMUI 12、MIUI 13 内置浏览器）会直接忽略 type="color"，渲染成 type="text"，甚至留白。检测方式很简单：
- 运行
document.createElement('input').type = 'color'，返回值仍是"color"才算真支持 - 别信
navigator.userAgent—— 很多 WebView 会伪造 Chrome 字样，但实际不支持 - 移动端 iOS
input[type="color"] 的 value 格式极其敏感
它只接受标准 7 位小写十六进制（"#ff6b35"），其他一律静默 fallback 到 "#000000"。常见翻车点：
- 传了
"rgb(255,107,53)"、"var(--primary)"、"blue"→ 黑色 - 服务端返回缩写
"#abc"，没补全成"#aabbcc"→ 黑色 - localStorage 里存的是
"#ff6b35cc"（带 alpha），读出来直接截断 →"#ff6b35"，但用户以为能调透明度 - 初始没设
value，input.value默认就是"#000000"，不是空字符串
监听颜色变化该用 input 还是 change？
必须同时绑两个事件，不能只靠一个：
-
input：拖拽滑块、在色环上移动取色点时实时触发，适合做预览、同步到 canvas 或 div 背景 -
change：只在用户点击“确定”或失焦后触发，适合做最终保存、提交校验 - 只绑
change→ 拖着滑块不动，UI 完全不更新，用户以为卡了 - 只绑
input→ 用户改完又反悔，点了“取消”，你却已经把中间值存进状态了
怎么让外观可控又不丢原生能力
核心思路：藏掉原生 input，用自定义元素触发它。这样既保住了系统调色板的兼容性与无障碍支持，又能完全控制尺寸、圆角、边框、暗色模式适配：
- CSS 隐藏 input：
#picker { position: absolute; opacity: 0; pointer-events: none; } - HTML 结构用
<label for="picker"><div class="color-preview"></div></label>，点击 div 就等于点 input - 别用
display: none或visibility: hidden—— 屏幕阅读器会跳过，键盘 Tab 也聚焦不到 - 移动端需加
touch-action: manipulation防止 300ms 延迟
真正麻烦的从来不是画一个色盘，而是处理 Safari 的 input 事件失效、安卓 WebView 的静默降级、以及用户随手粘贴的 "hsl(240,100%,50%)" —— 这些边界 case 不写校验逻辑，上线第一天就会收一堆“为啥我选的颜色变黑了”的工单。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
