web-dev-qa-db-ja.com

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

私のウェブサイトは、1つの例外を除いて、iPhone/Safariブラウザでうまく表示されます。

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

htmlcssiphonemobile-safaricss-reset
352
Alex

IOS 5以降では、古き良きborder-radiusがうまくいきます。

input {
    border-radius: 0;
}

IOSで丸みを帯びた角のみを削除する必要がある場合、またはその他の理由でプラットフォーム間で角を丸くすることができない場合は、代わりに接頭辞-webkit-border-radiusプロパティを使用します。もちろん、Appleはいつでも接頭辞付きプロパティのサポートをやめることを選ぶことができるが、他のプラットフォーム固有のCSS機能を考慮すると、それらが回避される可能性がある。

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

input {
    -webkit-appearance: none;
}
622
BoltClock

input -webkit-appearance: none;だけでは動作しません。

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

48
justadev

丸められたIOSを削除するのが最善の方法です。

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

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

35
KoemsieLy

承認された回答により、Chromeのラジオボタンが消えました。これは動作します：

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

これがCompass（SCSS）のための完全な解決策です。

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

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

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

-webkit-border-radius: 0;を単独で実行しても、ネイティブのスタイルはクリアされませんでした。これはネイティブアプリのWebビューにも当てはまります。

6
Chris Bernardi

これをお試し下さい：

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

 -webkit-appearance: none;
       border-radius: 0;
4
Ivin Raj

私は同じ問題を抱えていましたが、送信ボタンについてだけです。内側の影と丸みを帯びた角を削除するために必要 - 

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

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

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

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

4
Henrik N

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

3
Jesse

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

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