Google chrome Chrome/Safari：如果指定了边框，则框阴影仅显示在文本输入上

我在WebKit浏览器（Chrome 15.0.x和Safari 5.1.1）中遇到了一个问题，在这些浏览器中，文本输入上没有渲染框阴影。碰巧，我发现显式设置边框会导致框阴影渲染，即使将边框设置为“无”或默认值“插入”。下面的代码（在操作中查看）演示了使用Chrome或Safari查看时出现的问题，但在Firefox 6.0.2和Opera 11.52中呈现的效果与预期一致

HTML

---

我是否缺少在WebKit中使用框阴影的一些细节，或者我是否发现了一个bug？

input

s在WebKit中，默认情况下将此属性应用于它们：

-webkit-appearance: textfield;

如果希望文本字段的外观依赖于平台，则需要这样做。有时，您可以使用此still set设置样式，但其他时候，需要将其设置为

none

，这使其应用标准CSS并减少对操作系统的依赖。似乎

边框

会自动触发此操作，但

框阴影

不会自动触发，但是

框阴影

仅在

-webkit外观

为

无时应用。（如果应用了
box shadow
，则与平台相关的外观未关闭；如果启用了与平台相关的外观，则未呈现
box shadow
，这可能是一个错误）

要解决此问题，只需明确告诉它不要使用依赖于平台的外观：

input[type="text"] {
    -webkit-appearance: none;
}

带有
-webkit外观：无已添加。

这样做的缺点是，您失去了（部分）平台的本地外观，但如果您试图使用
box shadow
，您可能会试图改变本地外观。
Wow，这是一个模糊的属性。：）但是它对文本输入起到了一定的作用，并且系统特定样式的丢失是可以接受的。但是选择框有点不同。使用-webkit外观，它们变得非常不可预测：没有，而且我无法找到另一个看起来更好的值。与文本输入不同，在选择上指定边框不会触发导致阴影渲染的任何更改。我想这可能是个错误
-webkit-appearance: textfield;

input[type="text"] {
    -webkit-appearance: none;
}