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

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

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

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

ベストアンサー1

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;
}

おすすめ記事