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

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