移除 iOS 输入阴影答案

【问题标题】：Remove iOS input shadow移除 iOS 输入阴影
【发布时间】：2014-04-22 06:07:56
【问题描述】：

在 iOS (Safari 5) 上，我必须关注输入元素（顶部内阴影）：

我想移除顶部阴影，bug -webkit-appearance 没有保存。

当前样式是：

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

【问题讨论】：

附带说明，您应该小心在通用 input 选择器上设置“-webkit-appearance”。它可能会对单选按钮和复选框造成不良影响。
谢谢我在元素上使用它

标签： ios css input

【解决方案1】：

您需要使用-webkit-appearance: none; 来覆盖默认的IOS 样式。但是，在 CSS 中仅选择 input 标记不会覆盖默认的 IOS 样式，因为 IOS 通过使用属性选择器 input[type=text] 添加它的样式。因此，您的 CSS 将需要使用属性选择器来覆盖已预设的默认 IOS CSS 样式。

试试这个：

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

有用的链接：

您可以在此处了解有关appearance 的更多信息：

http://css-tricks.com/almanac/properties/a/appearance/

如果您想了解更多关于 CSS 属性选择器的信息，可以在这里找到一篇内容丰富的文章：

http://css-tricks.com/attribute-selectors/

【讨论】：

您可能还想将这些样式应用到input[type=password]。
这篇文章已经有将近 4 年的历史了。这需要更新吗？
当前使用的 Safari 选择器是 textarea, input[type="range"], input, input:matches([type="password"], [type="search"]) - 只需使用它，它应该适用于所有情况。
对我来说，它只有在我将!important 应用于appearance 时才有效。 appearance 也应该适用于 selects。

【解决方案2】：

background-clip: padding-box;

似乎也消除了阴影。

正如@davidpauljunior 提到的那样；小心在通用输入选择器上设置-webkit-appearance。

【讨论】：

background-clip: padding-box; 将移除 iOS 上文本输入字段中的阴影。例如，请参阅codepen.io/jstnrs/pen/YXBLVN（确保在 iOS 设备上打开 URL）。
这行得通，但有人知道它是如何工作的吗？谢谢。
对我不起作用，但 -webkit-appearance: none; 起作用。

【解决方案3】：

webkit 将删除所有属性

-webkit-appearance: none;

尝试使用属性 box-shadow 移除输入元素上的阴影

box-shadow: none !important;

【讨论】：

【解决方案4】：

正如其他人指出的那样，虽然公认的答案是一个好的开始，但它仅适用于type 为"text" 的输入。还有无数其他输入类型在 iOS 上也呈现为文本框，因此我们需要扩展此规则以考虑这些其他类型。

这是我用来消除内部阴影的输入文本字段和文本区域的 CSS，同时保留按钮、复选框、范围滑块、日期/时间下拉列表和单选按钮的默认样式，所有这些都是使用谦虚的<input>标签也是。

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

【讨论】：

我赞成这个处理其他输入类型，但从快速检查看来，:matches 似乎还没有完全支持浏览器 (caniuse.com/css-matches-pseudo) 我会把它写出来长格式，除非你使用一些 css 预处理器。

【解决方案5】：

我试图提出一个解决方案，a.) 有效 和 b.) 我能够理解它为什么有效。

我知道输入的阴影（以及 input[type="search"] 的圆角边框）来自背景图像。

显然设置background-image: none 是我的第一次尝试，但这似乎不起作用。

设置background-image: url() 有效，但我仍然担心有一个空的url()。虽然现在只是一种不好的感觉。

background-clip: padding-box; 似乎也可以完成这项工作，但即使在阅读了“背景剪辑”文档之后，我也不明白为什么这会完全删除背景。

我最喜欢的解决方案：

background-image: linear-gradient(transparent, transparent);

这是有效的 css，我明白它是如何工作的。

【讨论】：

@BugWhisperer 它确实适用于我的 iOS 12.4：codepen.io/receter/pen/ymMzRG 你能提供更多细节吗？
对我没用，但 background-clip: padding-box !important 有效。
@BugWhisperer 你能检查一下codepen.io/receter/pen/ymMzRG 上的例子是否适合你吗？如果background-image: linear-gradient(transparent, transparent) !important; 适合你，你也可以试试吗？我很高兴知道这里有什么问题。
不幸的是我刚刚更新了我的手机。他们都通过codepen在safari和chrome中工作，但我想知道如果你在本地测试它是否会得到相同的结果

【解决方案6】：

这对我来说效果更好。另外，这意味着我不必将其应用于每种不同类型的输入（即文本、电话、电子邮件等）。

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

【讨论】：