我无法更改输入的背景颜色

Question

大家好，我无法更改输入的背景颜色。它从浏览器 class - 'user agent stylesheet' 继承了白色，它覆盖了我的 class 和属性。问题是我尝试了定义输入的变通方法，但没有帮助。

input {
cursor: inherit;
} 

scss: 

    .authentication-form {
       &__input {
        @include formBorder;
        background-color: darkblue;
        padding: 1.5rem;
       }
    }

HTML:

<form class="authentication-form" method="POST"> {% csrf_token %}
    <div class="authentication-form__card">
        <h2>Login</h2>
        <input class="authentication-form__input" name="username" type="text">
        <input class="authentication-form__input" name="password" type="password">
        <button class="authentication-form__button" type="submit">Login</button>
    </div>
</form>

Answer 1

请参阅此示例以了解样式输入。您必须在 CSS 或 SASS 中写入 input[type=text]。

input[type=text] {
  background-color: darkblue;
  color: white;
}

<input type="text" placeholder="text">

为您的应用查看此示例：

input {
cursor: inherit;
} 

input[type=text] {
  background-color: darkblue;
  color: white;
  padding: 1.5rem;
}

input[type=password] {
  background-color: darkblue;
  color: white;
  padding: 1.5rem;
}

scss: 

    .authentication-form {
       &__input {
        @include formBorder;
        background-color: darkblue;
        padding: 1.5rem;
       }
    }

<form class="authentication-form" method="POST"> {% csrf_token %}
    <div class="authentication-form__card">
        <h2>Login</h2>
        <input class="authentication-form__input" name="username" type="text" placeholder="username">
        <input class="authentication-form__input" name="password" type="password" placeholder="password">
        <button class="authentication-form__button" type="submit">Login</button>
    </div>
</form>

我无法更改输入的背景颜色

I cant change background color of input

css

sass