css – Chrome/Safari：如果指定了border,box-shadow只会显示在文本输入上

我遇到WebKit浏览器(Chrome 15.0.x和Safari 5.1.1)的问题，其中盒子阴影没有在文本输入上呈现。只是偶然地，我发现明确设置边框导致框阴影渲染，即使您将边框设置为“无”或默认，“插入”。下面的代码(在 JSFiddle上查看它)在Chrome或Safari浏览时显示了问题，但是如Firefox 6.0.2和Opera 11.52所示。

HTML

<input type="text" value="Works" style="border:none;" />
<input type="text" value="Works" style="border:inset;" />
<input type="text" value="Doesn't" />

CSS

input[type="text"] {
    margin: 1em;

    -webkit-box-shadow: 0px 0px 2px 1px green;
    box-shadow: 0px 0px 2px 1px green;
}

我在WebKit中缺少使用盒子阴影的一些细节，还是发现了一个错误？

解决方法

默认情况下，WebKit中的输入具有应用于此的属性：

-webkit-appearance: textfield;

如果您希望文本字段的外观与平台相关，则这是您想要的。有时您可以使用这个仍然设置的样式，但其他时候，它需要设置为none，这使得它应用于标准CSS并且更少依赖于操作系统。似乎边框自动触发这个，但是box-shadow没有，但是 – -vbkit-appearance是none，只适用于box-shadow。 (如果应用了box-shadow并且如果启用平台相关的外观，则不会渲染box-shadow，则平台相关的外观不会关闭这一事实可能是一个错误)

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

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

Test it with -webkit-appearance：none;添加。

这样做的缺点就是你失去了(一些)平台的本地外观，但是如果你试图使用盒子阴影，那么你可能试图将原生的外观风格化。