<input type="color"> 的默认值必须显式设置为合法7位或4位十六进制色值（如 #RRGGBB），否则浏览器回退至不可靠的系统默认色；其 value 始终返回小写7位十六进制字符串（如 #ff6b35），不支持缩写、命名色或透明度；iOS Safari 15.4前不支持，15.4+需避免 appearance: none 等CSS干扰；兼容旧浏览器应结合JS检测并降级为带校验的文本输入。
HTML 表单里 <input type="color"> 的默认值怎么设才生效
不写 value 属性，浏览器会回退到系统默认色（通常是 #000000），但这个“默认”不可靠——不同浏览器、不同系统甚至深色模式下可能不一致。必须显式指定一个合法的 7 位或 4 位十六进制颜色值。
-
value必须是完整格式：#RRGGBB或#RGBA（不支持缩写如#FFF或命名色如red） - 如果传入非法值（比如
value="blue"），Chrome 和 Firefox 会静默忽略并重置为#000000，Safari 可能直接显示为空白 - 服务端返回颜色时，务必确保它已标准化为大写、7 位格式（例如后端存
rgb(255,100,50)，前端得转成#FF6432再赋给value）
用户选完颜色后，input.color 的值到底是什么格式
无论用户在拾色器里怎么拖拽、输入，最终 event.target.value 永远返回标准 7 位小写十六进制字符串，例如 "#ff6b35"。它不会保留 alpha 通道，也不转 HSL/RGB。
- 没有透明度信息：即使系统拾色器支持 alpha（如 macOS），
<input type="color">仍只输出不带透明的#RRGGBB - 大小写固定为小写，别用
=== "#FF6B35"做判断，要用.toLowerCase()或正则校验 - 不能依赖
change事件捕获中间状态——它只在用户确认选择后触发一次，拖拽过程中的实时变化无法监听
为什么 <input type="color"> 在 iOS Safari 上点不动
iOS 15.4 之前，Safari 完全不支持该控件，点击无反应；15.4+ 虽支持，但默认样式极小，常被误认为失效。根本原因不是代码错，而是原生实现缺失 + CSS 覆盖不当。
- 检查是否加了
appearance: none或过度重置padding/border，这会让 iOS 下的原生拾色按钮消失 - 不要用
width/height直接约束控件本身，改用外层<div>包裹并设置display: inline-flex对齐 - 真机调试时，用
console.log(navigator.userAgent)确认 iOS 版本，低于 15.4 就得降级为type="text"+ 第三方库（如vanilla-picker）
想兼容老浏览器又不想引入 JS 库？用 type="color" 加降级方案
核心思路是让现代浏览器走原生控件，旧浏览器自动 fallback 到文本输入，并附带颜色预览和基础校验。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构保持简洁：
<input type="color" value="#3498db">，所有浏览器都解析为input[type="text"]，只是旧浏览器不触发拾色器 - 用
CSS @supports (color: color-mix(in srgb, red, blue))或更稳妥的 JS 检测：'type' in document.createElement('input') && document.createElement('input').type === 'color' - 降级时，手动补上
pattern="#[0-9A-Fa-f]{6}"和title="请输入 #RRGGBB 格式颜色"，提升表单可用性
rgba(52, 152, 219, 1)），不转成 #3498db 就塞进 value，页面一刷新就变黑。 
