iPhone/Safari で角丸入力要素を無効にするにはどうすればよいですか?

iPhone/Safari で丸みを帯びた入力要素を無効にする

iOS デバイスの Safari では、テキスト入力フィールドが丸みを帯びたスタイルで表示される傾向があります。常に意図したデザインと一致します。この問題に対処するために、入力フィールドを丸めずに四角形で表示するように Safari に指示する方法を次に示します。

iOS 5 以降の場合:

1. CSS スタイル:

CSS ルール border-radius: 0 を使用します。すべての入力フィールドの角の丸い部分を削除します。

2. WebKit の外観:

特に検索入力フィールドの場合、-webkit-Appearance プロパティを none に設定します。

<code class="css">input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}</code>

従来の Safari バージョンの場合:

WebKit の外観:

古いバージョンの Safari では、すべての入力フィールドに対して -webkit-Appearance: none プロパティを使用して、丸みのあるスタイルを削除します。

<code class="css">input {
  -webkit-appearance: none;
}</code>

注:

• -webkit-border-radius: 0;プロパティは iOS でのみ入力フィールドをターゲットにするために使用できますが、将来的には段階的に廃止される可能性があります。
• 推奨される方法は、標準の border-radius プロパティと -webkit- を使用してプラットフォーム全体で丸い角を正規化することです。 Safari のみの外観プロパティ。

以上がiPhone/Safari で角丸入力要素を無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。