iPhone / Safari入力要素の丸めをオフにする

374

私のウェブサイトはiPhone / Safariブラウザで適切にレンダリングされますが、1つの例外があります。私のテキスト入力フィールドは奇妙な丸みを帯びたスタイルで、私のウェブサイトの他の部分とは見栄えがよくありません。

Safariに（CSSまたはメタデータを介して）入力フィールドを丸めず、意図したとおりに長方形にしないように指示する方法はありますか？

— アレックス
ソース

1

なぜだろうかNOの CSSのリセットがその超簡単CSSルールが含まれているようです。頭がおかしい。

— Toskan

1

私は実際に、eric meyerのcssリセット2に基づいてCSSリセットを作成しました。ここで回答にある必要なcssを追加しました。これはgithubで入手できます：github.com/Jossnaz/JossiCssReset

— Toskan

1

に注意してください。-webkit-appearance: none;この条件を特定の入力要素のスコープに制限する方が良いと思います。それ以外の場合は、ページにラジオ入力要素がある場合、それを非表示にすることができます。

— 2018

659

iOS 5以降では、good ol ' border-radiusがうまくいきます：

input {
    border-radius: 0;
}

iOSで丸みを帯びた角のみを削除する必要がある場合、または何らかの理由でプラットフォーム間で丸みを帯びた角を正規化できない場合は、-webkit-border-radius代わりにprefixed プロパティを使用してください。これは引き続きサポートされています。もちろん、Appleはいつでも接頭辞付きプロパティのサポートを削除することを選択できることに注意してください。ただし、他のプラットフォーム固有のCSS機能の可能性を考慮すると、それを維持する可能性があります。

以前のバージョンでは、-webkit-appearance: none代わりに設定する必要がありました：

input {
    -webkit-appearance: none;
}

— ボルトクロック
ソース

1

iOS 5以降、これは内側の影のみを削除します。丸みを帯びたコーナーを削除するためにPiyushの回答も確認してください。

— ジョナサンフリーランド

6

-webkit-appearance実際には、内側の影や丸みを帯びた角とは関係ありません。そのためだけに使用しないでください。css-infos.net/property/-webkit-appearance

— Rudie

14

「IOSが丸みを帯びた角と影を必要とする場合、IOSユーザーにそれらを持たせる」：これは私の状況ではまったく受け入れられません。おそらく他のほとんどの状況でも同様です。

— coredumperror 2014年

2

!!この方法は使用しないでください。チェックボックスが使用できないように見えるため、私のサイトユーザーの多くは支払い契約を進めていません。

— シントレシン2014

10

以下のために<input type="search">iOSの10私はまだ必要-webkit-appearance: none;。

— GabrielSmoljár2017

55

input -webkit-appearance: none; 単独では機能しません。

-webkit-border-radius:0px;さらに追加してみてください。

— Justadev
ソース

1

私は追加する必要がなかった-webkit-border-radiusために属性を<input type="text">iOSの5の角丸を削除する

— ジョナサン・フリーランド

0の後にpxを追加する必要はありません

— mintedsky、2015年

42

これは、IOSで丸められた部分を削除する最良の方法です。

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

注：このコードを選択オプションに使用しないでください。それは私たちの選択に問題があります。

— KoemsieLy
ソース

2

私は、使用input[type]がすべての入力に対してトリックを行うように見えることを発見しました。

— JacobTheDev

11

受け入れられた回答により、ラジオボタンがChromeで非表示になりました。これは機能します：

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

— フランソワ・ロマン
ソース

7

コンパス（SCSS）の完全なソリューションは次のとおりです。

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

— ヨハンスク
ソース

14

ご注意ください。@include border-radius(0);ミックスインは、独自に定義した場合、またはバニラSASSだけでなく、コンパスフレームワークを使用している場合にのみ使用できます。

— ワッフル2013

ご注意ください。SCSSを使用している場合は、おそらくautoprefixerも使用する必要があります。

— クリスチャン

6

iPhone 3GSのiOS 5.1.1では、検索フィールドのスタイルをクリアして、意図したスタイルに設定する必要がありました。

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

やって-webkit-border-radius: 0;一人では、ネイティブなスタイリングをクリアしていませんでした。これは、ネイティブアプリのWebViewの場合も同様です。

— クリス・ベルナルディ
ソース

5

同じ問題が発生しましたが、送信ボタンのみでした。内側の影と丸みを帯びた角を削除するために必要-

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

— Seanjacob
ソース

4

normalize.cssを使用すると、そのスタイルシートはのようになりinput[type="search"] { -webkit-appearance: textfield; }ます。

これは、のような単一のクラスセレクターよりも高い特異性を持っている.fooので、だけでは実行できないことに注意してください.my-field { -webkit-appearance: none; }。適切な特異性を達成するためのより良い方法がない場合、これは役立ちます：

.my-field { -webkit-appearance: none !important; }

— ヘンリックN
ソース

4

これをお試し下さい：

次のinputようにCssを追加してみてください：

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

— イヴィン・ラージ
ソース

3

私は単純なborder-radiusを使用しました：0; テキスト入力タイプの角丸を削除します。

— ジェシー
ソース

0

Safariやその他のブラウザでボタンを適切にレンダリングするには、webkit-appearanceをnoneに設定することに加えて、ボタンに特定のスタイルを指定する必要があります。例：

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf

— CpnCrunch
ソース