input[type="color"]默认值为"#000000"是规范行为，非bug；显式设置value须用合法7位或4位hex（如"#ff6b35"或"#f63"），非法值静默回退至"#000000"；动态赋值需确保元素已挂载；移动端旧版Safari可能降级为文本框；服务端须用/^#[0-9a-f]{6}$/i校验。
不设 value 属性时默认就是 "#000000"
这不是 bug，是规范强制行为。所有主流浏览器（Chrome、Firefox、Edge、Safari）都把 input[type="color"] 的初始值定为 "#000000"，不是空字符串、不是透明、也不是系统主题色。用户第一次点击，看到的就是黑色圆点被高亮——这就是“黑屏”来源。
预设颜色必须用合法 7 位或 4 位 hex 字符串
想避免黑屏，唯一办法是显式设置 value 属性，且格式必须严格：
-
value必须以"#"开头，不能漏 - 接受
"#rrggbb"（7 位，如"#ff6b35"）或"#rgb"（4 位，如"#f63"），但不接受"#fff"（3 位）、"#ff"、"#f"、"red"、"rgb(255,107,53)"或带 alpha 的"#ff000080" - 浏览器会自动标准化：大写转小写、补零（
"#f63"→"#ff6633"），但非法值直接静默回退到"#000000"
JS 动态赋值时 DOM 挂载顺序很关键
常见黑屏场景：元素创建后立刻设 value，但还没插入文档。Safari 尤其敏感，UI 不同步，仍显示黑色。
- 必须先
appendChild()或确保元素已挂载到document中，再赋值：el.value = "#3a86ff" - 避免在
document.write()或未解析完的内联 script 中操作 - 框架中（React/Vue）优先走响应式绑定，别手动改
value
移动端和 Safari 的“伪黑屏”更隐蔽
iOS Safari 15.4+ 才支持原生弹窗，旧版本或微信 WebView 直接降级为文本框——此时你看到的“黑块”其实是不可点击的 placeholder，不是颜色没设对，而是根本没控件。
立即学习“前端免费学习笔记（深入）”；
- 检测支持性要用：
const isColorSupported = typeof document.createElement('input').type === 'string' && document.createElement('input').type === 'color' - 不支持时，别只靠
display: none隐藏原生控件（Safari 仍会提交空值），改用visibility: hidden; position: absolute; tabindex="-1" - 服务端校验必须用正则：
/^#[0-9a-f]{6}$/i.test(value)，不能信前端传来的任何“看起来像颜色”的字符串
value="#3a86ff" 这种写法，而不是依赖 JS 后补——一旦漏了 "#" 或用了缩写，黑屏就在所难免。 
