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

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

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

测试它与-webkit-appearance: none;补充.

这样做的缺点是你失去了(某些)平台的原生外观,但是如果你正在尝试使用它box-shadow,你可能会试图去除原生外观.