iOS erzwingt abgerundete Ecken und Blendung bei Eingaben

93

iOS-Geräte fügen den Formulareingaben viele nervige Stile hinzu, insbesondere bei der Eingabe [type = submit]. Unten sehen Sie dasselbe einfache Suchformular in einem Desktop-Browser und auf einem iPad.

Desktop:

Desktop

iPad:

iPad

Die Eingabe [type = text] verwendet einen CSS-Box-Schatteneinsatz und ich habe sogar -webkit-border-radius angegeben: none; was anscheinend überschrieben wird. Die Farbe und Form meiner Schaltfläche [Typ = Senden] wird auf dem iPad vollständig verfälscht. Weiß jemand, was ich tun kann, um dies zu beheben? Danke im Voraus.

css ios forms anorganik
quelle
4
-webkit-Aussehen: keine; Hilft, die meisten Probleme zu beseitigen, beseitigt jedoch nicht die Lücke zwischen den beiden Elementen oder den abgerundeten Ecken. Jede Hilfe dazu wäre dankbar. Vielen Dank.
inorganik
2
Sie haben angegeben, -webkit-border-radius:none;haben Sie angegeben border-radius:none;?
Rigel Glen
7
Spezifizieren -webkit-appearance:noneund -webkit-border-radius:0den Trick auf iOS für mich gemacht!
Primus202

Antworten:

181

Die Version, an der ich gearbeitet habe, ist:

input {
    -webkit-appearance: none;
}

In einigen Webkit-Browserversionen kann es auch vorkommen, dass Sie border-radiusnoch vorhanden sind. Mit folgendem Reset zurücksetzen:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

Dies kann erweitert werden , um alle webkit Stil anwenden formKomponenten wie input, select, buttonoder textarea.

In Bezug auf die ursprüngliche Frage würden Sie den Wert 'none' nicht verwenden, wenn Sie ein auf Einheiten basierendes CSS-Element löschen. Beachten Sie auch, dass dadurch Kontrollkästchen in Chrome ausgeblendet werden. Verwenden Sie daher möglicherweise etwas wie input[type=text]oder input:not([type=checkbox]), input:not([type=radio])stattdessen.

marksyzm
quelle
5
-webkit-Aussehen: keine; Blendet Kontrollkästchen in Chrome aus - keine gültige Lösung!
Nico Westerdale
2
-webkit-Aussehen: keine; macht den Trick! (-webkit-border-radius nicht benötigt)
OZZIE
Guter Punkt - hängt von der Browserversion ab, die ich gefunden habe, also ist das nur für eine Ausfallsicherheit da. Ich werde den Beitrag auf Relevanz bearbeiten.
Marksyzm
3
Eingabe: nicht ([type = "checkbox"]) wäre ein besserer Weg, um das Problem in Chrome zu vermeiden? In IE <= 8 würde es zwar nicht funktionieren, aber das ist nicht das, was Sie beheben wollen.
Robin French
17

Sie können einige weitere Webkits für Formulare, Eingaben usw. entfernen, indem Sie Folgendes tun:

input, textarea, select {
   -webkit-appearance: none;
}
Nick
quelle
Es müsste immer noch border-radius: 0;vollständig zurückgesetzt werden und möchte keinen Randradius. Sonst setzen Sie einfach die border-radius.
Refilon
3

Verwenden Sie für die Schaltfläche "Senden" nicht:

<input type="submit" class="yourstylehere" value="submit" />

Verwenden Sie stattdessen das Button-Tag:

<button type="submit" class="yourstylehere">Submit</button>

Das hat bei mir funktioniert.

Digitaler Roboter-Gorilla
quelle
1
FWIW hatte gerade dieses Problem bei einem Projekt, und das iPad 1, an dem ich getestet habe, fügte <button>Tags auch Stile hinzu . Ich denke, Sie sollten dies besser direkt mit CSS lösen.
neemzy
1

Schauen Sie sich normalize.css an

Es gibt eine Demo, in der Sie die Formularelemente testen und sehen können, wie sie in ios aussehen. Es gibt mehrere Webkit-orientierte Eigenschaften.

Rdpi
quelle
1

Das verwende ich in meinen Projekten

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}
Waqar Alamgir
quelle
0

Dieses Problem tritt auch in einigen Browsern auf, wenn Sie Folgendes haben:

<a class="btn btn-primary" href="#" type="button">Link</a>

anstatt:

<a class="btn btn-primary" href="#" role="button">Link</a>

Dies kann passieren , wenn Sie Ihr Eingabeelement für einen anker Element ändern und vergessen zu ändern typezu role.

Ich hatte dieses Problem sowohl in Chrome als auch in Safari auf meinem iPad.

Dolch
quelle