原生 在 chrome、edge、safari 15.4+、firefox 112+ 中可用，旧版 safari 和部分安卓 webview 不支持，仅显示文本框或空白；值始终为 7 位小写十六进制（如 #a3c4ff），不支持透明度或命名色。
HTML color input 为什么点开没反应
多数情况是浏览器不支持或没正确绑定事件。原生 <input type="color"> 在 Chrome、Edge、Safari（15.4+）、Firefox（112+）可用，但旧版 Safari 和部分安卓 WebView 完全不渲染控件，只显示文本框甚至空白。
- 检查浏览器版本，用
navigator.userAgent或在线工具验证支持性 - 不要依赖
change事件监听颜色变化——某些安卓键盘会触发多次，优先用input事件 - 默认值必须是合法 7 位或 4 位十六进制色值（如
"#ff0000"），写成"red"或"rgb(255,0,0)"会导致回退为"#000000"
怎么获取和设置 color input 的值
value 属性永远返回 7 位小写十六进制字符串（如 "#a3c4ff"），即使用户输入的是简写 "#abc" 或通过拾色器选择，也自动标准化。它不支持透明度（alpha），rgba() 或 hsl() 都会被忽略。
- 读取：直接访问
inputElement.value，无需解析 - 设置：赋值必须是有效 7 位格式，
inputElement.value = "#ff6b6b"可以，inputElement.value = "tomato"无效 - 注意：初始无 value 时，
value返回"#000000"，不是空字符串
color input 在移动端常见兼容问题
安卓 Chrome 多数版本支持，但部分定制 ROM（如华为 EMUI、小米 MIUI）的系统 WebView 会禁用或降级为文本输入；iOS Safari 在 15.4 前完全不识别 type="color"，直接当 type="text" 处理。
- 检测是否真正支持：
document.createElement("input").type === "color"返回"color"才算真支持 - 不建议用 CSS 强制美化原生控件——各平台渲染差异大，hover、focus 样式基本不可控
- 若需 alpha 通道或更精细控制，必须用第三方库（如
vanilla-picker或chroma.js），原生控件做不到
替代方案：不依赖原生 color input 怎么做
当兼容性要求高或需要透明度、历史记录、渐变预设等功能时，原生控件就该让位。最轻量做法是监听文本输入 + 正则校验 + 简易色块预览。
立即学习“前端免费学习笔记（深入）”；
- 用
<input type="text">+ 实时正则/^#([0-9A-F]{3}){1,2}$/i校验 - 输入合法后，用
div.style.backgroundColor同步显示色块 - 点击色块可唤起系统原生 picker（仅限支持环境）：
inputElement.click()触发，但需先确保type="color"已存在且隐藏 - 别忘了加
aria-label和键盘操作支持（如方向键调节 HSL 分量），否则无障碍体验极差
原生 input type="color" 看似简单，但它的“简单”只存在于现代桌面 Chrome 里。跨端、可访问、带 alpha 的需求一来，就得自己搭一层薄薄的胶水逻辑——这点常被 demo 忽略。
