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

Question

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

http://jsfiddle.net/Pa2Kd/

Answer 1

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

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

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

Answer 2

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

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

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

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;
}
​

调味。