Hello guys I am not able to change background color of input. It inherits white color from the browser class - 'user agent stylesheet' which overrides my class and properties. The problem is I tried workound defining input what was advised on forum but did not help.
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>
CodePudding user response：
Please see this example for styling inputs. You will have to write input[type=text] in your CSS or SASS.
input[type=text] {
background-color: darkblue;
color: white;
}<input type="text" placeholder="text">Check out this example for your application:
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>