移除 iOS 输入阴影 [英] Remove iOS input shadow

问题描述

在 iOS (Safari 5) 上，我必须关注输入元素(顶部内阴影):

On iOS (Safari 5) I have to following for input element (top inner shadow):

我想移除顶部阴影，bug -webkit-appearance 没有保存.

I want to remove top shadow, bug -webkit-appearance doesn't save.

目前的风格是:

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

推荐答案

您需要使用 -webkit-appearance: none; 来覆盖默认的 IOS 样式.但是，在 CSS 中只选择 input 标签不会覆盖默认的 IOS 样式，因为 IOS 通过使用属性选择器 input[type=text] 添加它的样式.因此，您的 CSS 将需要使用属性选择器来覆盖已预设的默认 IOS CSS 样式.

You'll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.

试试这个:

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

有用的链接:

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

You can learn more about appearance here:

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

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

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

这篇关于移除 iOS 输入阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！