删除iOS输入阴影

Question

在iOS（Safari 5）上，我必须遵循以下输入元素（顶部内部阴影）：

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

Answer 4

我试图提出一种解决方案，[和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;
}