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

Answer 1

在WebKit中，

input默认情况下将此属性应用于它们：

-webkit-appearance: textfield;

如果您希望文本字段的外观与平台相关，那么这就是您想要的。有时您可以使用此设置来设置样式，但有时需要将其设置为none，这使得它应用标准CSS并减少对操作系统的依赖。似乎border会自动触发此操作，但box-shadow没有，但box-shadow仅在-webkit-appearance为none时才会应用。（如果应用box-shadow并且未启用box-shadow并且在启用平台相关外观时未呈现input[type="text"] { -webkit-appearance: none; }，则表明平台相关外观未关闭这一事实可能是一个错误。

要解决此问题，只需明确告诉它不要使用与平台相关的外观：

-webkit-appearance: none;

添加了box-shadow的

Test it。

这样做的缺点是你失去了（某些）平台的本机外观，但是如果你试图使用{{1}}，你可能会尝试去除原生外观。

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

1 个答案: