无法覆盖用户代理设置的按钮样式答案

【问题标题】：Can't override button styles set by user agent无法覆盖用户代理设置的按钮样式
【发布时间】：2018-08-27 21:10:58
【问题描述】：

坚持了几个小时。每当我尝试为按钮设置自定义类.btn 时，我都会得到以下信息。该类适用于任何<a> 元素，但表单内的任何按钮（<button> 或<input type="submit">）都会被忽略。通过忽略，我的意思是在 Chrome 开发工具中甚至不存在该类。 !important 没有区别，所以这不是特异性问题。这很奇怪，因为正在应用按钮修饰符（我正在使用 BEM）.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 文件是否有类吗？您是否进行了硬刷新或尝试使用隐身浏览器？
你能创建一个minimal reproducible example吗？
@PraveenKumar 感谢 Praveen 的提示，现在解决了。我只是查看了处理后的 CSS 文件并意识到我只为btn:link 和btn:visited 编写了样式，它们适用于<a> 元素，因为它们是默认状态。显然，对于按钮元素，btn 本身也需要这些样式，否则将应用浏览器默认设置。希望这对遇到和我一样问题的人有所帮助。
@HPJM 太棒了。请自己回答并在两天后接受，或者请删除问题。很高兴你让它工作。 :)

标签： css sass

【解决方案1】：

现在解决了。

我刚刚查看了处理后的 CSS 文件，并意识到我只为 btn:link 和 btn:visited 编写了样式，它们适用于 <a> 元素，因为它们是默认状态。

对于button 元素，btn 类本身也需要我只赋予伪类的样式，否则将应用浏览器默认值。希望这对遇到和我一样问题的人有所帮助。

【讨论】：