input[type="color"]需满足value为7位小写十六进制、监听input事件、浏览器兼容三条件；否则退化为文本框或变黑；不支持透明度、命名色及函数格式，须服务端标准化并降级处理。
input[type="color"] 能用，但必须满足三个硬条件：value 是标准 7 位小写十六进制、事件监听选对类型、浏览器版本够新；缺一不可，否则直接退化成文本框或静默变黑。
value 必须是 #rrggbb 格式，否则默认变黑
这个控件对 value 格式极其敏感。哪怕传入 "#abc"（4 位缩写）、"red"、"rgb(255,0,0)" 或带 alpha 的 "#ff000080"，都会被浏览器静默重置为 "#000000"，页面上看起来就像“没生效”。
- 初始值必须显式设置：
<input type="color" value="#ff6b35">，不写 value 时部分浏览器仍回退到"#000000"，但不可靠 - 服务端返回的颜色值，务必提前标准化：去掉空格、转小写、补全缩写（如
#abc→#aabbcc），可用正则/^#?([a-f\d])([a-f\d])([a-f\d])$/i检测并转换 - 从
localStorage或表单恢复时，先校验是否匹配/^#[0-9a-f]{6}$/i，否则 fallback 到默认色
监听 input 事件才能实时响应拖拽
用户在调色器中拖动滑块或点击色环时，change 事件不会触发——它只在用户确认选择（点“确定”或失焦）后执行一次。需要实时预览、同步样式或做校验，必须监听 input 事件。
-
input在 Chrome/Firefox 中持续触发，Safari 15.4+ 只在释放后触发一次，行为不一致但都比change更及时 - 别在 Vue/React 中只依赖
v-model或value受控属性就以为能捕获中间态，它们底层仍基于原生事件，得手动绑定input - 如果只是提交前取值，用
change更省资源；但凡涉及交互反馈，input是唯一选择
兼容性差的浏览器会直接降级，检测和降级得自己做
input[type="color"] 在 IE 全系、Safari ≤14.0、iOS Safari ≤15.3 中完全不识别，渲染为空白或普通文本框，且不触发任何事件。不能靠 CSS 隐藏或样式 hack 解决。
立即学习“前端免费学习笔记（深入）”；
- 检测是否真正支持：
const isColorSupported = document.createElement('input').type === 'color';，返回false就得降级 - 降级方案不是简单换
type="text"，而是加一层校验：input事件里用正则匹配颜色值，并同步更新预览色块（div.style.backgroundColor = value） - iOS Safari 15.4+ 虽支持，但默认点击区域极小，建议包裹一层
label或加 padding 扩大热区，避免用户点不中
别试图用 CSS 自定义拾色器弹窗，能调的只有预览小方块
系统级颜色选择器的 UI 完全不可定制：不能改布局、不能加历史色板、不能开透明度滑块、不能换语言。CSS 只能影响输入框本身的预览区域。
- Chromium 系（Chrome/Edge）可用
::-webkit-color-swatch微调小方块，比如加 border 或圆角，但仅限该伪元素 - Firefox 和 Safari 不支持任何伪元素干预内部结构，
appearance: none在 Safari 15.4+ 甚至会让控件失效 - 如果项目需要 HSV 滑块、alpha 控制、 eyedropper 或主题色分类，原生控件必须放弃，改用
vanilla-picker或封装chroma.js+ canvas 实现
最常被忽略的一点：它的 value 永远没有透明度，也永远不会是命名色或函数格式——哪怕你在 macOS 系统拾色器里调了 alpha，最终拿到的仍是纯 #rrggbb。这点在设计颜色配置系统时，必须从接口层就明确约束，不能等前端解析时报错才处理。
