Question

可以看出，我没有指定输入的背景颜色，但一个是灰色的，另一个是白色的，为什么？

<style>
.baken {
    border:1px solid #888888;
    font-family:Trebuchet MS,Helvetica,sans-serif;
    font-size:130%;
    font-weight:bold;
    margin:3px;
    padding:2px;
}

</style>


<input type="button" class="baken" value="answer your question"/>

<input type="button" value="hello button"/>

Answer 1

通过在按钮上指定边框，它会导致按钮上的默认操作系统特定样式被删除，将其恢复为某个默认值（似乎是灰色的）

您可以从班级中删除border来查看此操作。

Answer 2

因为指定border会使浏览器使用基本视觉样式而不是使用操作系统的主题来呈现按钮本身。删除border样式，它看起来就像另一个按钮。

Answer 3

您应该尝试使用DOM检查器来查看它是否从其他地方继承颜色。

Answer 4

另外要注意的是，除了边界位之外，其中一个输入是使用class="baken"定义的，另一个不是。因此，第一个输入按钮将使用您定义的样式并在上面显示;另一个将使用浏览器默认值，或者，如果您已定义标记级input样式，则使用已定义的样式。

如果您的输入都使用baken类，那么除了文本外，它们看起来都是相同的，并且是带有边框的基本可点击灰色框。

如果既没有使用baken类，那么它们看起来与文本完全相同，并且是浏览器默认或input标记定义的默认样式。

为什么两个输入的背景颜色不同？

4 个答案: