401

私の Web サイトは、iPhone/Safari ブラウザーで適切にレンダリングされますが、1 つの例外があります。

Safari に (CSS またはメタデータを介して) 入力フィールドを丸めず、意図したとおりに長方形にレンダリングしないように指示する方法はありますか?

4

11 に答える 11

698

iOS 5以降の場合：

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

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

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

input {
    -webkit-appearance: none;
}
于 2010-05-27T05:39:39.657 に答える
60

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

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

于 2011-01-22T10:50:33.847 に答える
46

IOS で丸みを帯びたものを削除する最良の方法です。

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

注: Select Option にこのコードを使用しないでください。私たちの選択に問題があります。

于 2014-01-21T02:32:20.933 に答える
11

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

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}
于 2016-03-16T17:52:00.763 に答える
8

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

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

一人でやっ-webkit-border-radius: 0;てもネイティブスタイルはクリアしませんでした。これは、ネイティブ アプリの Web ビューでもありました。

于 2012-08-23T16:59:06.827 に答える
7

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

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}
于 2012-11-08T10:54:19.810 に答える
5

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

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
于 2012-09-05T16:55:54.147 に答える
4

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

これは、 のような単一のクラス セレクターよりも特異性が高い.fooため、.my-field { -webkit-appearance: none; }. 適切な特異性を達成するためのより良い方法がない場合、これが役立ちます。

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

于 2015-02-09T11:04:19.607 に答える
3

シンプルな border-radius: 0; を使用しました。テキスト入力タイプの丸みを帯びた角を削除します。

于 2012-10-12T01:15:53.497 に答える
3

これをお試し下さい：

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

 -webkit-appearance: none;
       border-radius: 0;
于 2015-09-18T05:40:54.070 に答える