删除iOS输入阴影

Question

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

Answer 1

您需要使用-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/

Answer 2

background-clip: padding-box;

似乎也删除了阴影.

正如@davidpauljunior所说; 小心设置-webkit-appearance一般输入选择器.

Answer 3

虽然接受的答案是一个良好的开端，正如其他人所指出的，它仅适用于输入其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 4

webkit将删除所有属性

-webkit-appearance: none;

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

box-shadow: none !important;