Chrome / Safari：如果指定了边框，则框阴影仅出现在文本输入中

Question

我遇到了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中使用框阴影的某些细节，还是发现了一个错误？

Answer 1

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

-webkit-appearance: textfield;

如果希望文本字段的外观与平台有关，这就是您想要的。 有时您可以使用此设置来设置其样式，但有时需要将其设置为none ，这使其可以应用标准CSS并减少对操作系统的依赖。 似乎border自动触发了此操作，但是box-shadow却没有，但是只有-webkit-appearance为none时才应用box-shadow 。 （事实上，如果依赖于平台的外观不关闭box-shadow被施加，并且box-shadow不呈现如果依赖于平台的外观被启用可以是一个错误）

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

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

使用-webkit-appearance: none; 测试 -webkit-appearance: none; 添加。

不利的一面是您失去了（某些）平台的本机外观，但是如果您尝试使用box-shadow ，则可能无论如何都要尝试改变本机外观。