iPad / iPhoneでのCSS送信ボタンの奇妙なレンダリング

222

半径、色、境界線を使用してCSSでボタンのスタイルを設定すると、ボタンは美しく見えますが、iphone / ipad / ipodではひどいように見えます... Safariデスクトップと同じレンダリングではありませんか？

ここに画像の説明を入力してください

iphone css ipad mobile-safari mobile-webkit

— フランチェスコ
ソース

— iPad

回答:

453

おっとっと！自分自身を見つけた：必要な要素にこの行を追加する

   -webkit-appearance: none;

— フランチェスコ
ソース

私はあなた、stackoverflow、@ Francescoを愛しています

— jahrichie

すばらしい、そしてCSSトリックからのそれについての素晴らしい記事はここにあります。WebKitとMozillaによって変更された他のすべての要素がリストされています。

— Patrick

Compassには、このためのミックスインとcompass-style.org/reference/compass/css3/appearance

— Patrick Beeson、

12時間前にこのグーグル検索を行っていたらよかったのに...ありがとう。

— Elly Post

本当にすばらしい！この種の問題はiOSでも発生したとは思っていませんでした。

— Saurabh Prajapati

次のコードをcssファイルに追加します。

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

これは役立ちます。

— スビンダス午後
ソース

すごい！フォーム送信ボタンがiPadで

— 正常に表示

@peterkodermacは、親CSSクラスを追加することを忘れないでください。そうしないと、すべての入力フィールドに影響する可能性があります。

— subindas pm

Webkitの外観に関する上記の答えは魔法のようでしたが、ボタンは他のデバイス/デスクトップのブラウザーと比較して、まだ淡い/鈍いように見えました。また、不透明度を完全に設定する必要がありました（範囲は0〜1）。

-webkit-appearance:none;
opactiy: 1

不透明度を設定した後、ボタンはすべての異なるデバイス/エミュレーター/デスクトップで同じに見えました。

— プリヤンク・タッカー
ソース