input[type="color"]的value必须为7位小写#rrggbb格式，如#ff6b35；非标准格式（如#fff、rgb()、带alpha）会被忽略或重置为#000000；需校验前缀、大小写与长度；css读取的颜色须转为小写hex；推荐用input事件实现实时预览；兼容性须用特性检测而非ua；不可用css重绘内部结构，仅支持外层样式控制。
input[type="color"] 的 value 必须是 #rrggbb 格式
浏览器只认 7 位小写十六进制字符串，比如 #ff6b35。写成 #FFF、red、rgb(255,107,53) 或 #ff6b3580（带 alpha）都会被忽略，甚至重置为 #000000。
手动赋值时务必校验格式：
- 缺
#前缀（如"ff6b35"）→ 浏览器不渲染色块 - 含大写字母（如
"#FF6B35"）→ 部分浏览器 UI 不刷新 - 长度不对（如
"#f6b"）→ 被当作非法值丢弃
从 CSS 读取颜色（如 getComputedStyle(el).backgroundColor）返回的是 rgb()，必须先转成小写 hex 才能安全赋给 input.value。
监听 input 事件比 change 更实用
用户在 Chrome/Edge 的调色盘里拖拽滑块时，input 事件会连续触发，适合做实时预览；change 只在确认选择或失焦后触发一次，响应滞后。
典型用法：
const picker = document.querySelector('input[type="color"]');
picker.addEventListener('input', e => {
document.body.style.backgroundColor = e.target.value;
});
注意：不要在事件回调里直接改 e.target.value —— 这不会触发新事件，且可能因格式错误导致 UI 卡住。
兼容性检测不能靠 UA，得用特性检测
document.createElement('input').type === 'color' 是唯一可靠的判断方式。Safari 在 16.4+ 才支持，iOS Safari 15.4 前完全降级为文本框，IE 直接当 type="text" 处理。
降级方案要务实：
- 不推荐 polyfill —— 系统级调色盘无法模拟
- 可用
input[type="text"]+ 实时 hex 校验 + 颜色预览 div - 需要透明度或 HSV 控制？直接换库（如
vanilla-colorful）或手写 canvas 方案
别试图用 CSS 重绘 color 输入框内部结构
input[type="color"] 的色块按钮和弹出面板不在常规 DOM 中，多数浏览器不暴露可样式化的伪元素。Chrome 曾支持 ::-webkit-color-swatch，但已废弃；Firefox 和 Safari 完全不可控。
能安全操作的只有外层样式：
- 设宽高：
width: 40px; height: 40px; - 加圆角：
border-radius: 50%; - 隐藏 WebKit 默认边框：
border: none;
如果设计要求“色相环+明度条”或“预设色网格”，原生控件就该被放弃——它不是容器，只是个值输入接口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
