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

Posted 2023-03-06

【中文标题】Chrome/Safari：box-shadow 仅在指定边框时出现在文本输入中

【英文标题】：Chrome/Safari: box-shadow only appears on text input if border is specified

【发布时间】：2012-01-02 04:49:52

【问题描述】：

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

【参考方案1】：

inputs，在 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，您可能会尝试改变原生外观的样式。

【讨论】：

哇，这是一个不起眼的属性。 :) 但它对文本输入有用，并且系统特定样式的丢失是可以的。选择框有点不同。使用 -webkit-appearance:none，它们变得非常不美观，我无法找到另一个看起来更好的值。与文本输入不同，在选择上指定边框不会触发任何导致阴影呈现的更改。我认为这可能是一个错误