删除iO输入阴影 [英] Remove iOs input shadow

问题描述

在iOs（Safari 5）上，我必须关注输入元素（顶部内部阴影）：

http://s16.postimg.org/q9eluejl1/ios5_input.png

我要移除顶部阴影，错误-webkit外观不保存=（

当前样式：

  input {
 border-radius：15px; 
 border：1px broken #BBB; 
 padding：10px; 
 line-height：20px; 
 text- align：center; 
 background：transparent; 
 outline：none; 
 -webkit-appearance：none; 
 -moz-appearance：none; 
} 
  

解决方案

您需要使用 -webkit但是，选择CSS中的输入标签不会覆盖默认的IOS样式，因为IOS通过使用属性选择器 input [type = text] 添加它的样式。因此，您的CSS将需要使用一个属性选择器来覆盖默认的IOS CSS样式-set。

尝试此操作：

  input [type = text] {
 / * Remove First * / 
 -webkit-appearance：none; 
 -moz-appearance：none; 
 appearance：none; 
 
 / * Then Style * / 
 border-radius：15px; 
 border：1px dotted #BBB; 
 padding：10px; 
 line-height：20px; 
 text-align：center; 
 background：transparent; 
 outline：none; 
} 
  

实用链接：
$ b

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

如果您想了解更多有关CSS属性选择器的信息，

http://css-tricks.com/attribute - 选择器/

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

http://s16.postimg.org/q9eluejl1/ios5_input.png

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

current style:

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

解决方案

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.

Try this:

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

Helpful Links:

You can learn more about appearance here:

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

If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:

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

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