删除边框后，为什么默认按钮会更改颜色? [英] Why do default buttons change color when borders are removed?

问题描述

从下面的代码段可以看出，删除边框后背景颜色会变暗.我想这与浏览器默认样式表中的background-color: buttonface;有关，但是无法理解在w3上的简短说明.

As you can see from running the snippet below, the background color becomes darker when borders are removed. I guess it has something to do with background-color: buttonface; in the browser's default stylesheet, but am unable to understand the short description of it on w3.

浏览器:Ubuntu 18上的Chrome 78.

Browser: Chrome 78 on Ubuntu 18.

.noBorder {
  border: none;
}

<button type="button" class="noBorder">No border</button>
<button>With border</button>

推荐答案

我认为您不会在经典CSS世界中找到这种行为的解释，因为按钮是 special 元素.您可能需要深入研究每种浏览器如何实现button元素，以了解正在发生的事情.

I don't think you will find an explanation of this behavior in the classic CSS world because buttons are special elements. You may need to dig into how each browser implements the button element to understand what is happening.

我没有任何官方证明，只能使用简单的词语:按钮具有浏览器应用的默认样式(与边框和背景有关)，如果您尝试更改任何值，则会破坏一切.

I don't have any official proof but to use easy words: buttons have default style applied by the browser (related to border and background) and if you try to alter any value you will break everything.

示例:

<button style="background-color:grey">button</button>
<button style="border-color:grey">button</button>
<button style="border-width:3px">button</button>
<button style="border-radius:5px">button</button>
<button style="border-image:none">button</button>
<button style="border-image-slice:1">button</button>
<button style="background-origin:content-box">button</button>
<button style="background-clip:content-box">button</button>
<button>button</button>

 

在上面，您将注意到，如果我们更改任何与边框或背景有关的规则(甚至不相关的规则，如border-image-slice或background-clip)，所有按钮都将丢失其默认样式.在Firefox中，它的不同之处在于后四个按钮将保留其默认样式.不了解其他浏览器，但可能也有所不同.

In the above, you will notice that all the buttons are losing their default style if we change any rule related to border or background (even irrelevant ones like border-image-slice or background-clip). In Firefox, it's different as the last four buttons will keep their default style. Don't know about the other browser but it's probably different too.

更新

在最新版本的Chrome中，输入元素似乎也发生了同样的事情:

In the last version of Chrome the same thing seems to happen with input elements:

<input>
<input style="border-image-slice:1">
<input style="border-image:none">
<input style="border-width:3px">
<input style="background-origin:content-box">

这篇关于删除边框后，为什么默认按钮会更改颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！