删除iOS输入阴影

91

在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;
}

ios css input

— 惠特克
source

3

作为附带说明，您应该小心在常规input选择器上设置“ -webkit-appearance” 。它可能对单选按钮和复选框造成不良影响。

— davidpauljunior 2014年

谢谢我在元素上使用它

— WHITECOLOR 2014年

203

您需要使用-webkit-appearance: none;来覆盖默认的IOS样式。但是，仅选择inputCSS中的标记不会覆盖默认的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/

— 马斯特里亚尼
source

3

您可能还希望将这些样式应用于input[type=password]。

— Rockallite

1

这个职位将近4岁。这需要更新吗？

1

当前使用的Safari选择器是textarea, input[type="range"], input, input:matches([type="password"], [type="search"])-只需使用它就可以在所有情况下都可以使用。

— da_berni

对我来说，它只有在我申请!important了appearance。也appearance应该为selects工作。

— RuiVBoas

30

background-clip: padding-box;

似乎也要消除阴影。

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

— st
source

1

background-clip: padding-box;将在iOS的文本输入字段中删除阴影。例如，请参见codepen.io/jstnrs/pen/YXBLVN（确保在iOS设备上打开URL）。

— jstnrs

3

这可行，但是有人知道它如何运作吗？谢谢。

— Nostalg.io

不是为我工作，而是为我工作-webkit-appearance: none;。

— Lefi Tarik

5

webkit将删除所有属性

-webkit-appearance: none;

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

box-shadow: none !important;

— 闪亮乔斯
source

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，我知道它是如何工作的。

— 安德烈亚斯·里德米勒
source

@BugWhisperer对我而言它在iOS 12.4中有效：codepen.io/receter/pen/ymMzRG您可以提供更多详细信息吗？

— 安德烈亚斯·里德米勒

没有为我工作，但background-clip: padding-box !important工作。

— oldboy

@BugWhisperer您可以检查codepen.io/receter/pen/ymMzRG上的示例是否适合您？还可以尝试是否background-image: linear-gradient(transparent, transparent) !important;适合您？我很高兴知道这里的问题。

— 安德烈亚斯·里德米勒

不幸的是，我刚刚更新了手机。他们都通过Codepen在Safari和Chrome中工作，但是我想知道如果您对它进行本地测试，您是否会得到相同的结果

— oldboy

2

虽然接受的答案是一个良好的开端，正如其他人所指出的，它仅适用于输入其type是"text"。还有许多其他输入类型也可以在iOS上呈现为文本框，因此我们需要扩展此规则以考虑这些其他类型。

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

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

— 汤姆·斯宾塞
source

-7

这对我来说更好。另外，这意味着我不必将其应用于所有不同类型的输入（例如，文本，电话，电子邮件等）。

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

— Reado
source