input[type="color"]无法自定义面板结构，仅能触发浏览器原生调色器；可通过隐藏原生控件、用label包裹自定义预览区并绑定点击事件来接管交互，同时需标准化value为7位小写hex格式，并针对iOS旧版等环境做运行时检测与降级处理。
input[type="color"] 本身不支持自定义面板结构，它只渲染为一个带预览色块的原生按钮，点击后弹出系统级调色器——你无法用 HTML 或 CSS 改变它的弹出层内容或布局。所谓“配置结构”，实际是围绕它做 DOM 封装、事件桥接和降级处理。
怎么让 input[type="color"] 看起来不像默认按钮
不能改弹窗，但可以隐藏原生输入框，用其他元素触发它：
- 给
input#picker加position: absolute; opacity: 0; pointer-events: none;—— 这样它仍可被 JS 操作、能接收键盘焦点、对屏幕阅读器可见 - 用
<label for="picker"><div class="color-preview"></div></label>包裹自定义预览区域，点击div就等于点击input - 绝对不要用
display: none或visibility: hidden，否则键盘 Tab 和读屏器都会跳过 - 移动端加
touch-action: manipulation防止 300ms 延迟
为什么 input[type="color"] 的 value 总是 7 位小写
浏览器强制标准化输出：picker.value 永远返回形如 "#4a90e2" 的字符串，无论你初始化时写的是 "#4A90E2"、"#49e" 还是 "rgb(74,144,226)"（后者会被忽略）：
- 输入缩写如
#f08必须手动补全为"#ff0088"才能赋值给picker.value，否则部分浏览器静默失败 - 校验正则应为
/^#[0-9a-fA-F]{6}$/，注意不是 7 位（开头#+ 六位） - 赋值前做标准化：
hexValue = hexValue.replace(/^#?([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`)
如何兼容 iOS Safari ≤15.6 和旧 WebView
iOS Safari 在 15.4 之前完全不识别 type="color"，会退化成普通文本框；15.4–15.6 虽识别但 input 事件不触发，只能靠 change：
立即学习“前端免费学习笔记（深入）”；
- 检测是否真正可用：
const el = document.createElement('input'); el.type = 'color'; const isSupported = el.type === 'color'; - 真机测试比模拟器可靠，iOS 模拟器常假阳性
- 降级方案不是加 polyfill，而是换交互：用
<input type="text">+ 实时颜色预览 + 手动解析输入，或引入轻量库如vanilla-colorful - 别把它当唯一输入源：加一个隐藏的
<input type="text" name="color_hex">同步值，防止极端 case 下value为空
真正难的不是画个色盘，而是让颜色值在不同设备、不同事件时机、不同输入格式下始终可控且可预测——input[type="color"] 的 value 标准化规则、iOS 的事件断层、移动端唤起面板的不可控性，这些细节漏掉一个，用户就可能选不出想要的颜色。
