web-dev-qa-db-ja.com

iOSの入力シャドウを削除する

IOS（Safari 5）では、入力要素（上部の内側の影）について以下に従う必要があります。

example

トップシャドウを削除したいのですが、バグ-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;
}
ioscssinput
66
WHITECOLOR

デフォルトのIOSスタイルをオーバーライドするには、-webkit-appearance: none;を使用する必要があります。ただし、IOSは属性セレクターinput[type=text]を使用してスタイルを追加するため、CSSでinputタグのみを選択しても、デフォルトのIOSスタイルはオーバーライドされません。したがって、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/

161
Mastrianni
background-clip: padding-box;

同様に影を削除するようです。

@ davidpauljunior が言及されている;一般的な入力セレクタで-webkit-appearanceを設定する際は注意してください。

24
jstnrs

webkitはすべてのプロパティを削除します

-webkit-appearance: none;

プロパティbox-shadowを使用して、入力要素の影を削除してください

box-shadow: none !important;
5
ShinyJos

私はa。）が機能する解決策を考え出そうとしましたおよびb。）理由を理解することができます動作します。

入力の影（およびinput [type = "search"]の丸い境界線）は、背景画像からのものであることは知っています。

したがって、明らかにbackground-image: noneを設定するのは私の最初の試みでしたが、これはうまくいかないようです。

background-image: url()を設定しても機能しますが、空のurl()を使用することを引き続き懸念しています。現在のところ、それはただの悪い感じです。

background-clip: padding-box;も仕事をしているようですが、「background-clip」ドキュメントを読んだ後でも、なぜこれが完全に背景を削除するのかわかりません。

私のお気に入りのソリューション：

background-image: linear-gradient(transparent, transparent);

これは有効なcssであり、どのように機能するか理解しています。

2
Andreas Riedmüller