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

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方式回到OS渲染风格。

我能看到解决这个问题的唯一方法是为控件定义一致的规则集 - 这是一种耻辱，因为将这些样式规则留给用户的操作系统是一个完美的逻辑选择。

Answer 3

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

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

品尝季节。