Chrome / Safari：如果指定了边框，box-shadow仅显示在文本输入上 [英] Chrome/Safari: box-shadow only appears on text input if border is specified

问题描述

我遇到一个问题与WebKit浏览器（Chrome 15.0.x和Safari 5.1.1），其中框阴影不呈现在文本输入。偶然的，我发现明确设置边框会导致框阴影渲染，即使你将边框设置为'none'或默认，'inset'。以下代码（在 JSFiddle 上查看其操作）在使用Chrome或Safari观看时遇到了问题，但它会按照Firefox 6.0.2和Opera 11.52中的预期呈现。

I'm running into a problem with WebKit browsers (Chrome 15.0.x and Safari 5.1.1) where box shadows are not being rendered on text inputs. Just by chance, I discovered that explicitly setting the border causes the box shadow to render, even if you set the border to 'none' or the default, 'inset'. The code below (view it in action on JSFiddle) demonstrated the problem when viewed with Chrome or Safari, but it renders as expected in Firefox 6.0.2 and 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中使用框阴影的一些细节，错误？

Am I missing some detail of using box shadows in WebKit or have I found a bug?

推荐答案

输入默认情况下：

-webkit-appearance: textfield;

这是你想要的，如果你想要的文本字段的外观是平台相关的。有时你可以用这个静态集合来设置它，但是其他时候，它需要设置为 none ，这使它适用于标准的CSS，而不依赖于操作系统。看起来 border 会自动触发此操作，但 box-shadow 不会，仅当 -webkit-appearance 为 none 时才应用。 （如果应用 box-shadow 并且 box-shadow ，则平台相关的外观没有关闭，

This is what you want if you want the appearance of the text field to be platform-dependent. Sometimes you can style it with this still set, but other times, it needs to be set to none, which makes it apply standard CSS and rely less on the operating system. It seems border automatically triggers this, but box-shadow does not, yet box-shadow is only applied if -webkit-appearance is none. (the fact that the platform-dependent appearance is not turned off if box-shadow is applied and that box-shadow is not rendered if the platform-dependent appearance is enabled may be a bug)

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

To fix this, simply explicitly tell it to not use the platform-dependent appearance:

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

使用 -webkit-appearance：none; 添加

Test it with -webkit-appearance: none; added.

这样做的缺点是你失去了（某些）平台的本地外观，但是如果你试图使用 box-shadow ，你可能试图风格远离本土风貌。

The downside of this is you lose (some of) the platform's native look, but if you're trying to use box-shadow, you might be trying to style away the native look anyways.

这篇关于Chrome / Safari：如果指定了边框，box-shadow仅显示在文本输入上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！