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

Question

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

如果我在输入上使用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;
}

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

有什么想法吗？

Answer 1

为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>

Answer 2

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

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

仅使用CSS即可达到预期效果的唯一方法（至少是在视觉上）是使用较大的插入框阴影为背景着色，而不是设置背景颜色。后者由用户代理样式表锁定。