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

Posted 2023-02-24

【中文标题】自动填充后设置禁用的输入背景颜色

【英文标题】：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;

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

有什么想法吗？

【参考方案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 样式缺陷。我没有设置背景的问题，只有在使用谷歌浏览器的“自动填充”功能填充输入时 - 之后似乎无法设置背景。