ios - 移除 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;    
}

有用的链接:

您可以在此处了解有关外观的更多信息:

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

如果您想了解有关 CSS 属性选择器的更多信息，可以在此处找到内容丰富的文章:

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