iPhone/Safariのテキスト入力フィールドの角丸を削除する方法

iPhone/Safari で入力要素の丸めを無効にする

特定の Web サイトでは、iPhone/Safari でテキスト入力フィールドが不要な角が丸くなって表示される問題が発生する場合があります。 Safari ブラウザ。これは、Web サイトの意図したデザインと競合する可能性があります。

CSS ソリューション

他のブラウザに影響を与えずに、特に Safari で角の丸い部分を削除するには、入力要素のスタイルを変更します。 CSS の使用:

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

検索入力用の追加 CSS

検索入力フィールドには、追加のプロパティが必要です:

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

レガシー iOS バージョン

レガシー iOS バージョン (iOS 5 より前) の場合は、代わりに次の CSS プロパティを使用します:

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

注: Apple は将来、プレフィックス付き -webkit-border-radius プロパティのサポートを廃止する可能性があるため、さまざまなブラウザーやプラットフォーム間での互換性を確保するには、border-radius プロパティを使用して丸い角を正規化することを検討してください。

以上がiPhone/Safariのテキスト入力フィールドの角丸を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。