html无法限制color输入框的色值，必须用javascript拦截或改用radio按钮模拟色板；radio方案更可靠，支持无障碍且无需js；若保留color类型，需用input事件实时校验并重置非法值。
HTML原生无法限制可选色值
浏览器自带的颜色选择器（<input type="color">）不支持白名单过滤，它永远允许用户通过色盘/滑块输入任意#RRGGBB色值。所谓“限制颜色”，必须靠JavaScript拦截+UI替代实现，不是HTML属性能解决的。
用input type="radio" + CSS模拟固定色板最可靠
真实项目中要提供“仅限红黄蓝绿”这类选项，直接放弃color类型，改用单选按钮组合。好处是完全可控、无障碍友好、无JS依赖也能工作。
常见错误现象：input[type="color"]加list属性或pattern无效——浏览器根本不会校验这些属性。
- 每个
<input type="radio">的value设为合法色值，如#e74c3c - 用
label包裹input和一个带background-color的伪元素（或span）做视觉色块 - 禁用默认样式：
input[type="radio"] { appearance: none; }，否则会叠加原生圆点 - 注意
value必须是6位十六进制格式（如#ff6b6b），rgb(255,107,107)或tomato会被当作文本提交
如果非要保留色盘交互，必须用JS实时校验并重置
监听input事件，在用户选完后立刻检查element.value是否在预设数组里。不匹配就回退到上一个合法值，同时视觉反馈（比如边框变红）。
容易踩的坑：change事件触发太晚（用户已离开焦点），input事件才够及时；但要注意移动端可能触发多次，建议加简单防抖（50ms即可）。
- 预设色值数组写成全小写
["#3498db", "#2ecc71", "#f39c12"]，避免#3498DB比对失败 - 校验用
Array.includes()，别用indexOf > -1（语义差且旧版IE不支持） - 重置时用
element.value = lastValidValue，不要用setAttribute("value", ...)（后者不改变实际输入值） - 兼容性提醒：Safari 15.4+ 才支持
input[type="color"]的input事件，旧版本需降级为change
CSS自定义色值提示（非限制，但提升体验）
用户输入非法色值时，表单提交前可以靠:invalid伪类给输入框加红色边框，但前提是设置了pattern且value不匹配——不过这仅对文本输入有效，type="color"无视pattern。
所以真正能用的只有：input:invalid:not([type="color"]) { border-color: #e74c3c; }。对color类型，视觉反馈只能靠JS手动添加class。
-
pattern只对type="text"或type="url"等生效，对color、date等无作用 - 想让用户看到“只接受以下颜色”，就把色值列表用
<datalist></datalist>配type="text"，但这是提示不是限制 - 移动端iOS Safari的色盘UI不支持任何定制，连尺寸都不可调，别浪费时间尝试CSS hack
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
