Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich abgerundete Eingabeelemente in iPhone/Safari deaktivieren?

Barbara Streisand
Freigeben: 2024-10-30 16:16:26
Original
358 Leute haben es durchsucht

How Can I Disable Rounded Input Elements in iPhone/Safari?

Abgerundete Eingabeelemente in iPhone/Safari deaktivieren

Safari auf iOS-Geräten neigt dazu, Texteingabefelder mit einem abgerundeten Stil darzustellen, was möglicherweise nicht der Fall ist immer am beabsichtigten Design ausrichten. Um dieses Problem zu beheben, erfahren Sie hier, wie Sie Safari anweisen, die Eingabefelder nicht abzurunden und rechteckig darzustellen:

Für iOS 5 und höher:

1. CSS-Stil:

Verwenden Sie die CSS-Regel border-radius: 0; um die abgerundeten Ecken aller Eingabefelder zu entfernen.

2. WebKit-Erscheinungsbild:

Setzen Sie speziell für das Sucheingabefeld die Eigenschaft -webkit-appearance auf „Keine“.

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

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

Für ältere Safari-Versionen:

WebKit-Erscheinungsbild:

Verwenden Sie in älteren Versionen von Safari die Eigenschaft -webkit-appearance: none für alle Eingabefelder, um den abgerundeten Stil zu entfernen.

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

Hinweis:

  • Der -webkit-border-radius: 0; Die Eigenschaft kann nur für die Ausrichtung auf Eingabefelder unter iOS verwendet werden, wird jedoch möglicherweise in Zukunft eingestellt.
  • Die bevorzugte Methode besteht darin, abgerundete Ecken plattformübergreifend zu normalisieren, indem die Standardeigenschaft border-radius und das -webkit- verwendet werden. Erscheinungseigenschaft nur für Safari.

Das obige ist der detaillierte Inhalt vonWie kann ich abgerundete Eingabeelemente in iPhone/Safari deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage