不能默认信任——在chrome、edge、firefox桌面端基本可用，但safari（截至macos 14/ios 17）完全不支持，降级为普通文本框；ios safari同样不支持，用户仅见空文本框，必须做js特性检测并降级为自定义色盘或带校验的文本输入。
color input 在不同浏览器里到底能用吗
不能默认信任——<input type="color"> 在 Chrome、Edge、Firefox 桌面端基本可用，但 Safari（截至 macOS 14 / iOS 17）**完全不支持**，会降级为普通文本框，且无任何提示。移动端 Android Chrome 支持，iOS Safari 同样不支持，用户看到的只是个空文本框，还可能误输 #ff0000 这类字符串。
这意味着：如果你只靠 type="color" 做颜色选择，等于在 Safari 上直接丢失功能。必须做降级处理，不能只写一行 HTML 就完事。
怎么让 color input 降级后还能用
核心思路是检测支持性，再动态加载替代方案。别依赖 Modernizr 这类重型库，用原生 JS 一行就能测：
const isColorSupported = typeof document.createElement('input').type === 'string' &&
document.createElement('input').type === 'color';
如果 isColorSupported 为 false，就隐藏原生控件，插入一个轻量级色盘（比如 jscolor 或手写的 HSV 滑块），并把值同步到隐藏的 <input type="hidden"> 中。注意：不要用 CSS display: none 隐藏原生控件，否则 Safari 下它仍会提交空值；推荐用 visibility: hidden; position: absolute; 配合 tabindex="-1"。
value 值格式和 onchange 事件的坑
<input type="color"> 的 value 永远是 7 位小写十六进制格式（如 "#ff6b35"），哪怕用户选的是 RGB(255, 107, 53)，也自动转成 hex。而且它**不触发 input 事件**，只响应 change —— 用户点选调色板后关闭面板才触发，不是实时拖拽更新。
- 别监听
input，否则在 Chrome 里永远收不到回调 - 别指望
valueAsNumber，它返回NaN（该属性对 color 类型无效） - 设置初始值必须带 #，写
value="ff6b35"会被忽略，必须是value="#ff6b35" - 如果后端需要 RGB 或 HSL，自己解析 hex，别依赖浏览器转
样式定制几乎不可行，但可以微调外观
你不能用 CSS 改变调色板弹窗本身（那是 UA 控件，不受页面样式影响），但可以控制输入框的尺寸、边框、圆角等。Chrome 允许用 ::webkit-color-swatch 伪元素改 swatch 小方块背景，Firefox 用 ::moz-focus-inner 调整聚焦态，但 Safari 连这个都无效。
常见需求如“去掉默认边框”或“统一高度”，可行做法是：
- 设
width和height保证尺寸一致（建议 min-width: 40px） - 用
border: none+background: transparent配合外层容器加边框 - 禁用
outline时，务必提供其他焦点指示（比如 box-shadow） - 别对
appearance: none抱太大希望 —— Safari 下它会让控件彻底消失
真正难搞的不是样式，而是 Safari 下连基础交互都没有。这点比任何视觉细节都重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
