Chrome / Safari：仅在指定边框时，box-shadow才会出现在文本输入上

Question

我在使用WebKit浏览器（Chrome 15.0.x和Safari 5.1.1）时遇到了问题，即文本输入框上没有渲染盒子阴影。偶然间，我发现明确设置边框会导致盒子阴影渲染，即使您将边框设置为“none”或默认的“inset”。下面的代码（在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中的盒子阴影时是否遗漏了某些细节，还是发现了一个错误？

- spaaarky21

Answer 1

input元素在WebKit中默认具有此属性：

-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;

这样做的缺点是你会失去（部分）平台的原生外观，但如果你正试图使用box-shadow，你可能已经想要消除原生外观了。

- icktoofay

---

哇，那是一个晦涩的属性。:) 但它对于文本输入很管用，而且失去系统特定样式也没关系。选择框有点不同。使用-webkit-appearance:none会使它们变得相当难看，我也找不到其他更好的值。与文本输入不同的是，在选择框上指定边框不会触发任何导致阴影渲染的更改。我认为这可能是一个错误。 - spaaarky21