iOS入力シャドウを削除します

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

を使用-webkit-appearance: none;して、デフォルトのIOSスタイルを上書きする必要があります。ただし、inputCSSでタグのみを選択しても、デフォルトのIOSスタイルは上書きされませんinput[type=text]。これは、IOSが属性セレクターを使用してそのスタイルを追加するためです。したがって、CSSは属性セレクターを使用して、事前設定されているデフォルトのIOSCSSスタイルをオーバーライドする必要があります。

これを試して：

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/

background-clip: padding-box;

影も取り除いているようです。

以下のよう@davidpauljunior述べました。-webkit-appearance一般的な入力セレクターの設定には注意してください。

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

-webkit-appearance: none;

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

box-shadow: none !important;

私は、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であり、私はそれがどのように機能するかを理解しています。

受け入れ答えながら、他の人が指摘したように、それだけでその入力のために働く、良いスタートですtypeです"text"。iOSではテキストボックスとしてもレンダリングされる他の入力タイプが無数にあるため、これらの他のタイプを考慮に入れるためにこのルールを拡張する必要があります。

これは、ボタン、チェックボックス、範囲スライダー、日付/時刻ドロップダウン、ラジオボタンのデフォルトのスタイルを維持しながら、入力テキストフィールドと内部シャドウのテキスト領域を削除するために使用しているCSSです。これらはすべて、控えめな<input>タグを使用して作成されています。 。

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

これは私にとってはうまくいきます。さらに、それは私がそれをすべての異なるタイプの入力（すなわち、テキスト、電話、電子メールなど）に適用する必要がないことを意味します。

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}