input[type="color"]不支持手动输入，禁用键盘输入且pattern等属性无效；需搭配type="text"实现HEX手输与拾色器双向同步，值必须为7位小写十六进制格式。
input[type="color"] 本身不接受手动输入，别想用 pattern 限制它
原生 input[type="color"] 在大多数浏览器中会禁用键盘输入——点击后直接弹出系统拾色器，用户无法在框内敲入 #ff0000 或 red。所以你根本不需要、也不能用 pattern、oninput 校验或 inputmode="text" 去“限制它只输十六进制”。它压根就不走文本输入流程。
真要支持手输 HEX，得用 type="text" + 正则校验 + 同步到 color input
常见需求其实是：既要拾色器（input[type="color"]），又要允许用户粘贴或键入 #abc、#aabbcc 这类合法 HEX。这时必须配一个 input[type="text"]，并做双向同步：
- 监听
text输入框的change或blur，用正则/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/校验，合法则赋值给colorInput.value - 监听
color输入框的input事件（不是change！Safari 不触发change），把event.target.value（一定是小写 7 位如#ff6b35）同步回text框 - 注意：不要用
setAttribute('value', ...)更新color，必须用colorInput.value = '#ff6b35' - 服务端返回的颜色值，务必提前标准化为大写/小写 7 位格式（如
#FF6432→#ff6432），否则 Safari 可能静默回退成#000000
为什么不能用 value="#f00" 这种缩写？
虽然 CSS 支持 #f00，但 input[type="color"] 的规范只要求 7 位（或 4 位带 alpha，但 alpha 不被支持）格式。iOS Safari 15.4 之前完全不认 #f00，部分 Android 浏览器也会 fallback 到黑。实测中：value="#f00" 在 Safari 中常显示为空白或默认黑，而 value="#ff0000" 稳定生效。所以统一用 7 位，省去兼容性判断。
别碰 appearance: none 和 ::-webkit-color-swatch 深度定制
想改颜色选择器按钮样式？Chrome 和 Firefox 下 ::-webkit-color-swatch 只允许改 border、background-color、width/height，且 iOS Safari 完全不支持该伪元素。加 appearance: none 在 Safari 里反而会让控件消失或失效。如果你需要完整自定义（比如加透明度滑块、HSV 面板、预设色块），就别用原生 type="color"，老老实实用 div + Canvas/JS 实现，或者引入成熟库如 react-colorful 或 vanilla-picker。
立即学习“前端免费学习笔记（深入）”；
