input[type="color"]必须使用小写7位或4位合法十六进制值（如#ff6b35或#f63a），禁用命名色、RGB等格式；change仅确认后触发，实时响应需用input事件；iOS Safari易因CSS限制失效，服务端应统一转小写校验。
value 必须是合法 7 位或 4 位十六进制色值
不设 value，浏览器会回退到不可靠的系统默认色（通常是 #000000），但深色模式、iOS 和 Windows 系统下可能不一致。必须显式写死一个合法值：
-
value="#ff6b35"✅ 合法（7 位小写） -
value="#f63"✅ 合法（4 位缩写，仅限 #RGBA 格式，如#f63a） -
value="red"❌ 静默失败，Chrome/Firefox 重置为#000000，Safari 可能空白 -
value="rgb(255,107,53)"❌ 不识别，不会解析
后端返回颜色时，务必提前标准化：转成大写 7 位格式（如 #FF6B35），再传给前端赋值——否则 Safari 可能拒绝渲染。
change 事件只在确认后触发，input 事件才支持拖拽实时响应
change 是最常用监听方式，但它只在用户点击“确定”或离开控件时触发一次；拖拽滑块、输入框手动改值等中间过程完全捕获不到。
- 需要实时预览背景色？用
input事件：colorInput.addEventListener('input', () => { el.style.backgroundColor = colorInput.value; }) - 需要提交前校验？仍要用
change，因为input可能触发非法中间态（比如用户输到一半#ff） - 别依赖
valueAsNumber或valueAsDate——input[type="color"]不支持这两个属性
iOS Safari 15.4+ 支持但极易失效
不是代码写错了，而是原生实现太脆弱。常见失效场景：
立即学习“前端免费学习笔记（深入）”；
- CSS 加了
appearance: none→ iOS 下拾色按钮直接消失 - 写了
width: 30px; height: 30px;直接约束控件 → 原生按钮被裁剪，点不动 - 父容器用了
flex但没设align-items: center→ 控件垂直错位，热区偏移
稳妥做法：外层套 <div style="display: inline-flex; align-items: center;">，控件本身只设 margin，不碰 width/height/appearance。
服务端接收和存储时注意大小写与透明度缺失
用户选完颜色，event.target.value 永远是小写 7 位格式，例如 "#ff6b35"。它不保留 alpha，也不转 HSL/RGB —— 即使 macOS 拾色器带透明度滑块，input[type="color"] 也只输出不带 alpha 的 #RRGGBB。
- 做颜色比对时，别用
=== "#FF6B35"，要用.toLowerCase()或正则/^#[0-9a-f]{6}$/i - 如果业务需要透明度，不能靠这个控件，得换
input[type="text"]+ 自定义拾色器，或加单独的 alpha 输入框 - 存数据库前建议统一转小写并校验长度，避免后续 CSS 渲染异常（某些旧版 Android WebView 对大写敏感）
真正容易被忽略的是：它永远不输出命名色、不输出 RGB 字符串、不输出任何带空格或括号的格式——所有非标准输入都会被浏览器静默丢弃，只留一个干净但受限的 #rrggbb。
