直接用 CSS 设置 background-color 即可生效，无需 JS 或额外 wrapper；但需避开 opacity、filter 和 background: none 三类误用，且注意不同 type 的 input 自带 UA 样式可能覆盖设置。
background-color 直接生效，无需 JS 或额外 wrapper；但必须避开 opacity、filter 和 background: none 这三类常见误用。
直接用 CSS 设置 background-color 就够了
HTML 的 input 元素原生支持 background-color，写法和普通元素完全一致。浏览器会正确渲染，且兼容 IE8+。
-
background-color: #f0f0f0;—— 纯色背景，最常用 -
background-color: transparent;—— 透明背景，语义清晰、无副作用（比rgba(255,255,255,0)更推荐） -
background-color: #fff9c4;—— 浅黄背景，适合强调输入状态
别碰 opacity: 0 或 filter: alpha(opacity=0)：它们会让文字、边框、placeholder 全部变透明，不是“背景透明”。
input[type="color"] 的背景色不能设，value 才是关键
input[type="color"] 是系统级控件，它的“外观”由操作系统决定，CSS 无法修改其内部背景或按钮颜色。你真正能控制的只有它的 value 值——也就是用户选中的颜色。
立即学习“前端免费学习笔记（深入）”；
- 初始化必须写全：
<input type="color" value="#ff6b35">，不写或写错格式（如#abc、red、rgb(255,0,0)）会静默变成#000000 - 监听
input事件才能实时响应拖拽，change只在失焦后触发一次 - 校验值是否合法：
/^#[0-9a-f]{6}$/i.test(colorInput.value)，否则 fallback 到默认色
想预览颜色？用另一个 <div> 显示：previewDiv.style.backgroundColor = colorInput.value，别试图给 color input 自己加背景。
focus 状态下背景变色容易失效的几个原因
很多人写 input:focus { background-color: #e8f0fe; } 发现没反应，问题通常不在选择器本身。
- 浏览器 UA 样式可能带
!important，比如某些 Safari 版本会强制覆盖你的background-color -
type="search"或type="number"有隐藏按钮（× 或上下箭头），它们自带背景，会遮挡你的设置；需先加appearance: none;清除 - 如果父容器有
overflow: hidden或transform，焦点时的重绘可能被裁剪或卡顿 - 深色模式下，浅色
background-color在暗背景下可能对比度不足，建议配合color和border-color一并调整
jQuery 写法容易报错，原生 DOM 更稳
像 $("#aa").style.backgroundColor = 'red' 这种写法必然报错：jQuery 对象没有 style 属性，它是包装器，不是原生元素。
- ✅ 正确（原生）：
document.getElementById("aa").style.backgroundColor = "red"; - ✅ 正确（jQuery）：
$("#aa").css("background-color", "red"); - ❌ 错误：
$("#aa").style.backgroundColor（undefined） - ❌ 错误：
$("#aa")[0].style.backgroundColor = "red"（虽能运行，但绕过 jQuery 的兼容层，不推荐）
现代项目建议统一用原生 API，避免 jQuery 的额外体积和隐式转换开销；若必须用 jQuery，请严格走 .css() 方法。
真正容易被忽略的是：不同 type 的 input（比如 search、number、date）在各浏览器中自带 UA 样式，这些样式会覆盖你的 background-color，且优先级高。清不干净 appearance 和伪元素，背景色就永远出不来。
