Question

我已经看到了多个答案，但到目前为止我还没有设法解决我的问题。

我有一些像这样的文本字段：

.form-wrapper .field-list .field .field-element{
  background-color: rgba(0,0,0,0.5);
  color: rgba(255,255,255,255);
}

所以在这里，它将获得现有的框（文本字段），它将背景更改为半透明黑色，并将文本颜色更改为白色。然而，当我在文本字段中单击时，它从半透明黑色变为纯白色。有关如何修复/使其与文本字段背景颜色相同的任何帮助？ - 谢谢

注

我见过这样的东西：

#inputId:-webkit-autofill {
background-color: white !important;
}

但这对我没用。

Answer 1

使用:focus伪元素。

.form-wrapper .field-list .field .field-element:focus {
  color: #fff;
  background-color: rgba(0,0,0,0.5);
}

您甚至可以同时设置焦点表单和非焦点表单的样式：

.form-wrapper .field-list .field .field-element,
.form-wrapper .field-list .field .field-element:focus,
{
  background-color: rgba(0,0,0,0.5);
  color: rgba(255,255,255,255);
}

我建议您为重点输入表单创建某种样式差异。这是出于可访问性/可用性的原因。

文本字段在CSS中应该是透明的时候是白色的吗？

1 个答案: