自动填充后设置禁用的输入背景颜色答案

【问题标题】：Set disabled input background color after autofill自动填充后设置禁用的输入背景颜色
【发布时间】：2019-03-19 00:41:30
【问题描述】：

我正在创建一个表单，一旦提交，我想删除输入的背景颜色。

如果我对输入使用 Google 自动填充，则会忽略背景颜色和颜色属性。

在开发工具中，它显示我的样式应该可见，但它们不可见。

input:disabled, textarea:disabled, .disabled {
  background: #060301;
  color: #f0eef3;
}

/* Annoyingly we have to override Chrome styles */
input:-webkit-autofill:disabled, 
textarea:-webkit-autofill:disabled,
input:-internal-autofill-selected {
  background: #060301!important;
  color: #f0eef3!important;
}

除非使用自动填充，否则它工作正常。

有什么想法吗？

【问题讨论】：

标签： css

【解决方案1】：

您可以在禁用之前重新设置输入字段的值。这将重置 Chrome 的自动填充状态。

inputField.value = inputField.value
inputField.disabled = true

仅使用 CSS 实现所需效果（至少在视觉上）的唯一方法是使用大的嵌入框阴影为背景着色，而不是设置背景颜色。后者被用户代理样式表锁定。

【讨论】：

【解决方案2】：

为type="text":的所有禁用输入元素设置背景颜色可以在html中添加disabled属性并添加背景。

Reference

input[type=text]:enabled {
  background: #ffff00;
}

input[type=text]:disabled {
  background: #dddddd;
}

<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

【讨论】：

不幸的是，这并不能解决问题。我开始认为这是 Chrome 样式缺陷。我没有设置背景的问题，只有在使用谷歌浏览器的“自动填充”功能填充输入时 - 之后似乎无法设置背景。