Contact-Form7 元素发生 ERROR 时的背景

Question

自一周以来我一直在网上寻找合适的答案......所以是时候问你们了，伙计们！我正在使用 Contact Form 7（带有“CF7 条件字段”插件），并且我正在尝试在 CSS 中定制其外观。

这就是我的问题所在；当提交出现错误（例如，某些必填字段未填写）时，CF7 会切换到“错误模式”，并根据主题的调色板更改错误填写的表单的背景颜色。 但这会造成一种奇怪的情况，即表单的背景颜色和各个表单元素的背景颜色相同！ 在移动设备上填写表格时，这尤其令人不安。

有人可以帮助我如何在 CSS 中设置元素的背景颜色，以防出现任何填写错误吗？

谢谢， 亚当

Answer 1

要在联系表单 7 中提交出现错误时更改表单元素的背景颜色，您可以将自定义 CSS 添加到 WordPress 主题。

.wpcf7-not-valid input[type="text"],
.wpcf7-not-valid input[type="email"],
.wpcf7-not-valid textarea {
    background-color: #f8d7da; /* Change this to your desired background color */
}

我使用 .wpcf7-not-valid 类来定位具有验证错误的表单元素。然后，我使用 CSS 选择器来定位特定的输入类型，例如文本、电子邮件和文本区域。您可以调整背景颜色值（本例中为#f8d7da）以匹配您想要的颜色。