Невозможно переопределить стили кнопок, установленные пользовательским агентом

Застрял на этом часами. Я получаю следующее, когда пытаюсь установить собственный класс для кнопок, .btn. Класс работает с любым элементом <a>, но любая кнопка (<button> или <input type = "submit">) внутри формы игнорируется. Под игнорированием я подразумеваю, что в инструментах разработчика Chrome этого класса даже нет. !important не имеет значения, так что это не проблема специфики. Это странно, потому что применяется модификатор кнопки (я использую БЭМ), .btn--black. Я использую SASS, Webpack и React, если это имеет значение.

СТИЛИ АГЕНТОВ ПОЛЬЗОВАТЕЛЯ

input[type = "button" i], input[type = "submit" i], input[type = "reset" i], 
input[type = "file" i]::-webkit-file-upload-button, button {
   border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
   border-style: solid;
   border-width: 1px;
   padding: 1px 7px 2px;
}
user agent stylesheet
input[type = "button" i], input[type = "submit" i], input[type = "reset" i], 
input[type = "file" i]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
}
user agent stylesheet
input[type = "button" i], input[type = "submit" i], input[type = "reset" i] {
-webkit-appearance: push-button;
user-select: none;
white-space: pre;
}
user agent stylesheet
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 11px system-ui;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb !important;
}

Можете ли вы проверить, есть ли у CSS-файла, отображаемого в браузере, класса? Вы выполняли аппаратное обновление или пытались использовать браузер в режиме инкогнито?

Praveen Kumar Purushothaman 19.03.2018 11:36

Можете ли вы создать минимальный воспроизводимый пример?

Mr Lister 19.03.2018 11:45

@PraveenKumar Спасибо за подсказку Praveen, теперь решено. Я просто посмотрел обработанный файл CSS и понял, что я написал только стили для btn:link и btn:visited, которые отлично подходят для элементов <a>, поскольку это состояния по умолчанию. Очевидно, что для элементов кнопок сам btn также нуждался в этих стилях, иначе применились бы настройки браузера по умолчанию. Надеюсь, это поможет кому-то, кто столкнулся с той же проблемой, что и я.

HPJM 19.03.2018 11:46

@HPJM Потрясающе. Либо ответьте на этот вопрос самостоятельно и примите его через два дня, либо удалите вопрос. Рад, что у вас все получилось. :)

Praveen Kumar Purushothaman 19.03.2018 11:49
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
4
1 316
1

Ответы 1

Решено сейчас.

Я просто посмотрел на обработанный файл CSS и понял, что я написал только стили для btn:link и btn:visited, которые отлично подходят для элементов <a>, поскольку это состояния по умолчанию.

Для элементов button сам класс btn также нуждался в стилях, которые я дал только псевдоклассам, иначе будут применяться настройки браузера по умолчанию. Надеюсь, это поможет кому-то, кто столкнулся с той же проблемой, что и я.

Другие вопросы по теме