1. ホーム
  2. html

[解決済み] iPhone/Safariの入力要素の丸め機能をオフにする

2022-03-24 21:30:16

質問

私のウェブサイトは、iPhone/Safariブラウザでうまく表示されますが、1つだけ例外があります。テキスト入力欄が奇妙な丸みを帯びたスタイルになっており、ウェブサイトの他の部分と見栄えが全く合いません。

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

解決方法は?

iOS 5 以降の場合。

input {
  border-radius: 0;
}

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

iOS でのみ角丸を除去する必要がある場合、あるいは何らかの理由でプラットフォーム間で角丸を正規化できない場合は、以下のようにします。 input { -webkit-border-radius: 0; } プロパティの代わりに、まだサポートされています。もちろん、Apple はいつでも接頭辞付きプロパティのサポートを停止することができますが、他のプラットフォーム固有の CSS 機能を考慮すると、このプロパティは維持される可能性が高いことに留意してください。

レガシーバージョンでは -webkit-appearance: none の代わりに

input {
    -webkit-appearance: none;
}