google-chrome - Chrome / Safari : box-shadow only appears on text input if border is specified

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

input，在 WebKit 中，默认应用此属性:

-webkit-appearance: textfield;

如果您希望文本字段的外观与平台相关，这就是您想要的。有时您可以使用这个静态集来设置样式，但其他时候，需要将其设置为 none，这使得它应用标准 CSS 并减少对操作系统的依赖。似乎 border 会自动触发此操作，但 box-shadow 不会，但 box-shadow 仅在 -webkit-appearance 时应用 是 none。 (事实上​​，如果应用了 box-shadow，则平台相关的外观不会关闭，如果启用了平台相关的外观，则 box-shadow 不会呈现，这一事实可能是个错误)

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

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

Test it添加了 -webkit-appearance: none;。

这样做的缺点是您会失去(部分)平台的原生外观，但如果您尝试使用 box-shadow，您可能会尝试通过样式来消除原生外观。