SafariMobileが入力ボタンの角を丸くするのを止めます

82

私は主題がそれをすべて言うと思います。Iphone、Ipod、またはIpadで表示したときにWebアプリケーションがあり、入力送信ボタンの角が丸くなっています。これを止める方法はありますか？

ios mobile-safari

185

追加した場合...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

次に、ボタンは、他のブラウザに適用したCSSスタイルを継承します。

— アクションの方法
ソース

1

これはiPad2、iOS5.1.1では機能しません。ただし、テストするものがないため、他のiOASデバイスで動作しないかどうかはわかりません。ただし、Roelの-webkit-border-radius:0pxソリューションは機能します。

— coredumperror 2012

あなたは-webkit-外観を適用しない場合は、次のどれもが、その後のSafariは、すなわち（それに適用され、可能な性質上好き嫌いを取得していないfont-sizeし、color最善の解決策は、両方を適用することになる。。

— methodofaction

このソリューションがiPad、iOS5.1.1で機能することを確認するために報告します。

— Dominor Novus 2013

6

2歳のコメントに返信する....まあ。-webkit-外観：なし; チェックボックスがChromeに表示されなくなります。おそらく他の要素やブラウザにも影響します。

— matthew_360 2014

ワオ！！！コルドバアプリでこれを修正する時間を探していましたが、これが解決策でした！私はこれを十分に賛成することはできません!!!

— Jay Dinse 2015

18

-webkit-appearance：none、私にはうまくいきませんでした。

これは行います：

input[type=submit] {
    -webkit-border-radius:0px;
}

iPhoneだけで、背景画像のあるボタンの角が丸くなっているという同じ問題がありました。

— ロエル
ソース

1

確認：ここで（Duopixelによる）最も投票された回答は機能しませんが、Roelの回答は機能します。これはおそらく、その間にAppleのモバイルWebkitの実装に加えられた変更によるものです。

— coredumperror 2012

@ CoreDumpError-あなたはそれがあなたのために機能しないことを意味します。解決策は私のために働いた-私はちょうどそれを実装した。なぜ私たちが異なる結果を経験しているのかわかりません。繰り返しになりますが、あなたの投稿は半年以上前に行われたため、同じ問題がまだ発生しているかどうかはわかりません。

— Dominor Novus 2013

@Roel、あなたは単に優先順位の問題を抱えているかもしれません...？

— フランクノッケ2014年

13

次のCSSを使用してみてください。

-webkit-appearance:none;

詳細：http：//trentwalton.com/2010/07/14/css-webkit-appearance/

— dthukka
ソース

6

iPad 2では、次のものを使用する必要があることがわかりました。

-webkit-appearance:none;
border-radius: 0;

ボタンクラスで。

— ダニエレF。
ソース

3

入力送信type = "image"のサイトがありました。上記のこのvairationは、丸みを帯びた角を修正しました。

input[type=image] {
    -webkit-border-radius:0px;
}

— RevConcept
ソース

1

設定background: linear-gradient(color1, color2)により、Appleデバイスの過度に丸みを帯びた角がなくなり、試した他のすべてのブラウザ/プラットフォームで機能することがわかりました。

— メイト
ソース

これは私にとってそれを修正しました、そしてそれは私には意図しない副作用を持っている可能性が最も低いオプションであるように思われます。

— WimDeblauwe20年

1

「ボタン」タイプと「送信」タイプの両方のコードを追加することで解決しました。

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

— AGalvis
ソース