如何更改表单域的默认背景颜色

Question

这是我的表单 (Yii2)

<?php $form = ActiveForm::begin(); ?>

        <?= $form->field($model, 'email')->textInput(['maxlength' => true]) ?>

        <?= $form->field($model, 'password')->passwordInput(['maxlength' => true]) ?>

        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Login') : Yii::t('app', 'Update'), 
        ['class' => $model->isNewRecord ? 'btn btn-success btn-block btn-lg' : 'btn btn-primary']) ?>

<?php ActiveForm::end(); ?>

当我运行它时，我得到一个带有黄色背景的表单。我想要一个白色的背景。所以我使用了以下css

background-color: white !important;

但它没有用。用户代理样式表有这个值

input:-webkit-autofill, textarea:-webkit-autofill {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
}

我认为这个值会导致我的表单呈黄色。但我用白色改变它并没有解决我的问题。

Answer 1

使用与用户代理样式表相同的选择器来覆盖您自己的 CSS 中的值：

input:-webkit-autofill, textarea:-webkit-autofill { background-color: white; }

否则，如果您的选择器（顺便说一句，您未能向我们展示）不太具体，它将无法工作。

---

您可能还想考虑的其他事项：

这种特殊格式用于向用户表明他们已在浏览器的密码管理器中实际保存了此表单的登录数据。因此，出于简单的“审美”原因而将这一重要的视觉线索从他们身上移开可能不是最明智的选择。