Question

http://codepen.io/anon/pen/KwKOaz

仅更改background-color会显着改变按钮元素的样式，特别是border样式。

background change

这种情况发生在Mac上的chrome，safari和firefox上。为什么会这样？如何安全地更改背景颜色？

Answer 1

浏览器供应商将自定义样式应用于按钮和输入字段等UI元素。更改其中一个覆盖的属性会导致禁用该元素上的所有其他供应商样式。如果你想改变一个属性，你也必须改变其他属性，我很害怕。

不幸的是，我无法告诉你他们为什么会这样做 - 可能会有一些规范落后，但我找不到任何证据。

Answer 2

当所有样式都不受影响时，浏览器使用主机操作系统给定的API来呈现给定的控件。这将使控件看起来是平台的原生，但如果您将任何样式应用于该控件/元素，则浏览器无法保证给定的样式可以应用于给定的平台，因此它默认返回到简化的完全css解决方案

另请注意，样式控制元素虽然有效，但尚未被稳定标准所涵盖。

例如，NSButton（OS X中按钮后面的本机控件）没有设置背景颜色的选项，因此浏览器面临一项不可能完成的任务。在Windows上，您可以更改背景颜色，这就是人们报告在Windows上没有看到您的问题的原因。

Answer 3

有时会继承CSS样式。但是，您正在将样式应用于您的身体，这是HTML中的所有内容。就个人而言，除了重置或规范化CSS之外，我不会对身体应用任何东西。也就是说，您可以使用CSS选择器运算符和\或id / classes来最小化：

http://www.w3schools.com/cssref/css_selectors.asp

示例：

HTML

btw不写这样的html更容易阅读

<body>
    <div class="wrapper">
          <button class="all-btns red">
              Cancel
          </button>

          <button class="all-btns green">
               Save
          </button>
    </div>
</body>

CSS

.div.wrapper {
    width: 100%;
    height: auto;
    background: #efefef;
}

.all-btns {
    border: solid 1px #000; 
    width: 50px;
    line-height: 48px;
    height 35px;
    color: #fff;
}

.btn.red {
    color: #fff;
    background: red;
}
.btn.green {
    background: green;
}

为什么更改按钮的`background-color`也会改变其他样式？

3 个答案: