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

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 { 背景颜色:白色； }

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

---

您可能还需要考虑的其他事项:

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