#css #sass
#CSS #нахальство
Вопрос:
Здравствуйте, ребята, я не могу изменить цвет фона ввода. Он наследует белый цвет от класса браузера — «таблица стилей агента пользователя», которая переопределяет мой класс и свойства. Проблема в том, что я попытался обойти определение ввода, что было рекомендовано на форуме, но не помогло.
input { cursor: inherit; } scss: .authentication-form { amp;__input { @include formBorder; background-color: darkblue; padding: 1.5rem; } } HTML:
lt;form class="authentication-form" method="POST"gt; {% csrf_token %} lt;div class="authentication-form__card"gt; lt;h2gt;Loginlt;/h2gt; lt;input class="authentication-form__input" name="username" type="text"gt; lt;input class="authentication-form__input" name="password" type="password"gt; lt;button class="authentication-form__button" type="submit"gt;Loginlt;/buttongt; lt;/divgt; lt;/formgt; Комментарии:
1. Пожалуйста, поделитесь своей разметкой тоже.
2.
.authentication-formвложен ли файл in scss в какой-либо селектор?3. нет, он не вложен
4. Автоматически ли заполняются поля браузером? Это связано с тем, что браузеры применяют некоторые дополнительные стили к этим полям и переопределяют заданный вами цвет фона.
Ответ №1:
Пожалуйста, ознакомьтесь с этим примером для ввода стилей. Вам придется написать input[type=text] в своем CSS или SASS.
input[type=text] { background-color: darkblue; color: white; } lt;input type="text" placeholder="text"gt; Ознакомьтесь с этим примером для вашего приложения:
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 { amp;__input { @include formBorder; background-color: darkblue; padding: 1.5rem; } } lt;form class="authentication-form" method="POST"gt; {% csrf_token %} lt;div class="authentication-form__card"gt; lt;h2gt;Loginlt;/h2gt; lt;input class="authentication-form__input" name="username" type="text" placeholder="username"gt; lt;input class="authentication-form__input" name="password" type="password" placeholder="password"gt; lt;button class="authentication-form__button" type="submit"gt;Loginlt;/buttongt; lt;/divgt; lt;/formgt;