HTML中文本框input标签背景颜色改变的方法-html教程-PHP中文网

css background-color属性用于设置元素背景色，覆盖内容、内边距和边框区域但不含外边距；支持颜色名、十六进制、rgb等值，transparent为默认值；ie8及以下不支持inherit。

html中文本框input标签背景颜色改变的方法

绝大多数场景下，给 input 设背景色不需要 JS，纯 CSS 最干净。只要没被更高优先级样式（比如浏览器自动填充）覆盖，background-color 就能立刻起效。

常见写法：

input[type="text"] {
  background-color: #f5f5f5;
  color: #333;
}

注意两点：

用 JS 改背景色，核心是操作 DOM 元素的 style.backgroundColor 属性，不是 style.background，也不是 jQuery 的 .style() 写法（那是错的）。

错误示例：$("#aa").style.backgroundColor = 'red' —— $("#aa") 是 jQuery 对象，没有 style 属性

正确方式（原生）：

const input = document.querySelector('input');
input.style.backgroundColor = '#e0f7fa';

正确方式（jQuery）：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

$('#aa').css('background-color', '#e0f7fa');

常用触发时机：

聚焦时：input.addEventListener('focus', () => { input.style.backgroundColor = '...'; })
输入时：input.addEventListener('input', () => { ... })
校验失败后：if (!isValid) input.style.backgroundColor = '#ffebee';

Chrome 在自动填充用户名、密码等字段后，会强加 input:-webkit-autofill 样式，背景固定为 #ffeb3b，普通 background-color 完全无效。

靠谱解法只有一条：

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}

关键点：

这个 type 的 value 不是“随便传个颜色就能用”，它极度挑剔格式：必须是小写、无空格、6 位十六进制，如 #ff6b35。传 #abc、rgb(255,0,0) 或带 alpha 的值，都会静默变成 #000000。

安全做法：

初始化时显式写全：<input type="color" value="#ff6b35">
监听 input 事件（不是 change），才能拖拽实时响应
标准化 value 值：colorInput.value.toLowerCase().replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`)
兼容性检测必须手动：const isColorSupported = document.createElement('input').type === 'color';，不支持就降级为带正则校验的文本框

最易忽略的一点：iOS Safari 15.4+ 虽支持 type="color"，但默认点击热区极小，不加 <label></label> 包裹或 padding 扩展，用户根本点不中。