为什么应用背景颜色时文本输入会更改其边框属性？

Question

这是一个例子，我在 FF 3.6 中查看，带有 background:transparent 的输入与未触及的输入具有不同的边框。

http://jsfiddle.net/Pa2Kd/

Answer 1

我的假设是，当样式未更改时，将使用本机 Win32 控件及其默认设置（或多或少）。但是，当您确实更改样式时，将使用自定义控件，或者更自定义的 Win32 控件版本。

我记得小时候玩弄 Internet Explorer 4 中的滚动条时发生过类似的事情：如果你不乱动它们（操作系统的主题），它们看起来很正常，但如果你乱动，它们就会变得“扁平”。另一件事是按钮：Windows Aero 按钮看起来就像它们一样 - 没有太多需要改变的地方。如果您想更改按钮的颜色，则需要“禁用”按钮的 Aero 主题，然后您会得到一个旧式 3D 或平面按钮，具体取决于您的浏览器。

只是一些想法。我可能完全错了，因为网页设计不是我的专业领域。

Answer 2

我赞同安德烈亚斯所说的。

我不知道为什么这两者都不是。我根据经验推断，当 border background-color 视觉属性之一发生更改时，浏览器会从“操作系统渲染样式”模式切换到“自己创建渲染规则”模式。遗憾的是，据我所知，没有 CSS 方法可以恢复操作系统渲染风格。

我认为处理这个问题的唯一方法是为控件定义一致的规则集 - 这是一个耻辱，因为将这些样式规则留给用户的操作系统是一个完全合乎逻辑的选择。

Answer 3

正如其他人所说，这是由于默认的操作系统样式在您添加任何属性后立即被清除。您可以使用 CSS 模仿默认样式，但进行操作系统检测并相应地应用不同的 CSS 规则可能会有些过分。相反，您可以选择您喜欢的操作系统样式并将其应用为所有文本输入的默认样式。 Mac OSX 样式可以使用以下 CSS 合理地再现：

#background {
    background: transparent;
    border:1px solid #ddd;
    padding:2px;
    -webkit-box-shadow:inset 0px 1px 2px #333;
    -moz-box-shadow:inset 0px 1px 2px #333;
    box-shadow:inset 0px 1px 2px #333;
}
​

季节口味。