[解決済み] 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;
}
関連
-
document.forms 使用方法
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み] label要素の中にinput要素を入れるべきですか?
-
[解決済み] HTMLで単語の折り返しをオフにするには?
-
[解決済み] CSS3のborder-radiusプロパティとborder-collapse:collapseが混ざらないのですが。border-radiusを使用して、角を丸くした折りたたみテーブルを作成するにはどうすればよいですか?
-
[解決済み】iPad/iPhoneでCSSの送信ボタンが変な描画になる。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] HTML5で(非空白の)自己閉鎖タグは有効ですか?
-
[解決済み] CSSでdivを縦にスクロールできるようにする
-
[解決済み] 残りの幅を埋めるためにdivを展開する