Question

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

example

我想删除顶部阴影，错误-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;
}

Answer 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/

Answer 2

background-clip: padding-box;

似乎也可以删除阴影。

提到@davidpauljunior;小心在常规输入选择器上设置-webkit-appearance。

Answer 3

webkit将删除所有属性

-webkit-appearance: none;

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

box-shadow: none !important;

Answer 4

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

我确实知道输入的阴影（以及输入[type =“ search”]的圆形边框）来自背景图像。

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

设置background-image: url()是可行的，但是我仍然担心有一个空的url()。尽管目前感觉还很糟。

background-clip: padding-box;似乎也可以完成这项工作，但是即使阅读了“ background-clip”文档，我也无法理解为什么它会完全删除背景。

我最喜欢的解决方案：

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

这是有效的CSS，我知道它是如何工作的。

Answer 5

正如其他人指出的那样，虽然可接受的答案是一个好的开始，但它仅适用于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;
}

Answer 6

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

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

删除iOS输入阴影

6 个答案: