原生 仅支持小写7位十六进制格式（如 #4a90e2），简写、大写、rgb、带alpha等均失效；须同时监听 input 和 change 事件以保障兼容性；预览需确保dom就绪、元素有宽高、value 属性存在；不支持透明度或hsl，需额外控件组合实现。
直接用 <input type="color"> 就能加，但必须满足格式、事件和兼容性三重约束，否则在 Safari 或旧版 WebView 里会退化成文本框甚至不响应。
为什么 value="#f00" 或 value="red" 不生效
原生 color 输入框只认严格的小写 7 位十六进制字符串（"#rrggbb"），其余全部被忽略并回退到默认值 "#000000"：
-
value="#f00"❌ 简写格式，部分浏览器（如 Safari）不解析，显示黑色但实际值未设 -
value="rgb(255,0,0)"❌ 完全不支持，控件直接 fallback -
value="#FF0000"❌ 大写，在 Android WebView 中色块可能不更新 -
value="#4a90e280"❌ 带 alpha，直接失效，不会报错但值为空或默认黑
修复方式：服务端或 JS 中统一转成小写 7 位格式，例如 "#4a90e2"；从 CSS 获取颜色时（如 getComputedStyle(el).backgroundColor），先转 rgb() → hex → 小写补零。
监听颜色变化必须同时绑 input 和 change 事件
仅绑 change 会导致 Android WebView 或旧版 iOS Safari 无响应；仅绑 input 则在 Safari 取消选择后无法捕获“恢复原值”动作：
-
input事件：拖拽滑块过程实时触发，适合预览同步 -
change事件：用户确认选择后触发（点击“完成”或失焦），Safari 16.4+ 支持，但旧版只靠它 - 正确写法：
picker.addEventListener('input', handler); picker.addEventListener('change', handler); - 别依赖
e.inputType或e.isTrusted——它们在 color input 中不可靠
预览色块不更新？先检查这三件事
把 picker.value 赋给 element.style.backgroundColor 看似简单，但常见卡点如下：
- DOM 未挂载就赋值：确保 JS 在元素存在后再执行，或用
DOMContentLoaded - 预览元素没宽高：
<div id="preview"></div>必须带style="width:60px;height:60px;"，否则渲染为空白 - Safari 显示留白：
<input type="color">必须有value属性（哪怕设为"#000000"），否则某些版本不渲染色块 - 服务端存的值和前端不一致：记住
picker.value永远返回小写 7 位格式，"#4A90E2"和"#49e"都会变成"#4a90e2"
需要透明度或 HSL？别硬改 type="color"
它天然不支持 alpha、HSL、命名色，任何试图塞 rgba() 或 hsl() 的做法都会导致控件失效或 fallback：
- 务实方案：加一个
<input type="range" min="0" max="1" step="0.01">控制opacity，与 color input 组合使用 - 拼接逻辑：用
data-color="#4a90e2"+data-alpha="0.8"，JS 中转rgba(r,g,b,a)再应用 - 项目已用 React/Vue：优先选
react-color或vanilla-picker，它们对 alpha、HSB、预设色支持完整，且规避了系统级控件的兼容陷阱
真正容易被忽略的是：你看到的“颜色选择器”在不同设备上根本不是同一个东西——Chrome 弹的是系统调色板，Safari 是自己的模态窗，Android WebView 可能直接是文本框。别指望外观或行为完全一致，重点守住 value 格式、事件绑定、降级兜底这三条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
