[解決済み] iOSの入力シャドウを除去する

質問

iOS (Safari 5)で、input要素(上部の内側に影)のために以下を行う必要があります。

トップシャドウを消したい、バグ -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;
}

どのように解決するのですか？

この問題を解決するには -webkit-appearance: none; を使用して、デフォルトのIOSスタイルを上書きする必要があります。しかし、単に input タグを選択しただけでは、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/