iOSは角を丸め、入力にグレアをかける

iOSデバイスは、フォーム入力、特にinput [type = submit]に多くの迷惑なスタイルを追加します。以下に示すのは、デスクトップブラウザーとiPadでの同じ単純な検索フォームです。

デスクトップ：

iPad：

input [type = text]はCSSボックスシャドウインセットを使用しており、-webkit-border-radius：none;も指定しています。これは明らかに上書きされます。入力[type = submit]ボタンの色と形がiPadで完全に粗雑になっています。誰かがこれを修正するために何ができるか知っていますか？前もって感謝します。

私が働いていたバージョンは次のとおりです：

input {
    -webkit-appearance: none;
}

一部のWebkitブラウザーバージョンでは、border-radiusまだ適切な状態にある場合もあります。以下を使用してリセットします。

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

これを拡張しformてinput、などのすべてのWebkitスタイルのコンポーネントに適用できます。select、buttonまたはtextarea。

元の質問を参照すると、ユニットベースのcss要素をクリアするときに値「none」を使用しません。またので、おそらくのようなものを使用し、Chromeでこの非表示のチェックボックスがあることに注意してくださいinput[type=text]またはinput:not([type=checkbox]), input:not([type=radio])その代わり。

これで、いくつかのWebkitフォーム、入力などのスタイリングを取り除くことができます。

input, textarea, select {
   -webkit-appearance: none;
}

送信ボタンには使用しないでください：

<input type="submit" class="yourstylehere" value="submit" />

代わりに、ボタンタグを使用します。

<button type="submit" class="yourstylehere">Submit</button>

これでうまくいきました。

normalize.cssを見てください

フォーム要素をテストして、iOSでどのように表示されるかを確認できるデモがあります。複数のWebkit指向のプロパティがあります。

これは私のプロジェクトで使用するものです

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}

また、以下の場合、一部のブラウザーでこの問題が発生します。

<a class="btn btn-primary" href="#" type="button">Link</a>

の代わりに：

<a class="btn btn-primary" href="#" role="button">Link</a>

これは、アンカー要素の入力要素を変更typeし、に変更し忘れた場合に発生する可能性がありますrole。

iPadのChromeとSafariの両方でこの問題が発生しました。