Entfernen Sie den iOS-Eingabeschatten

Unter iOS (Safari 5) muss ich für das Eingabeelement (oberer innerer Schatten) Folgendes beachten:

Ich möchte den oberen Schatten entfernen, der Fehler -webkit-appearancewird nicht gespeichert.

Aktueller Stil ist:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

Sie müssen verwenden -webkit-appearance: none;, um die Standard-IOS-Stile zu überschreiben. Wenn Sie jedoch nur das inputTag in CSS auswählen, werden die Standard-IOS-Stile nicht überschrieben, da IOS seine Stile mithilfe eines Attributselektors hinzufügt input[type=text]. Daher muss Ihr CSS einen Attributselektor verwenden, um die voreingestellten Standard-IOS-CSS-Stile zu überschreiben.

Versuche dies:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Hilfreiche Links:

Hier erfahren Sie mehr über appearance:

http://css-tricks.com/almanac/properties/a/appearance/

Wenn Sie mehr über CSS-Attributselektoren erfahren möchten, finden Sie hier einen sehr informativen Artikel:

http://css-tricks.com/attribute-selectors/

background-clip: padding-box;

Scheint auch die Schatten zu entfernen.

Wie @davidpauljunior erwähnt; Seien Sie vorsichtig bei der Einstellung -webkit-appearanceeines allgemeinen Eingangswählers.

Das Webkit entfernt alle Eigenschaften

-webkit-appearance: none;

Verwenden Sie die Eigenschaft box-shadow, um den Schatten auf Ihrem Eingabeelement zu entfernen

box-shadow: none !important;

Ich habe versucht, eine Lösung zu finden, die a.) Funktioniert und b.) Ich verstehe, warum es funktioniert .

Ich weiß, dass der Schatten für Eingaben (und der abgerundete Rand für Eingaben [type = "search"]) von einem Hintergrundbild stammt.

Das Einstellen background-image: nonewar also offensichtlich mein erster Versuch, aber das scheint nicht zu funktionieren.

Das Einstellen background-image: url()funktioniert, aber ich mache mir immer noch Sorgen, dass es leer ist url(). Obwohl es derzeit nur ein schlechtes Gefühl ist.

background-clip: padding-box; scheint den Job auch zu erledigen, aber selbst nach dem Lesen der "Hintergrund-Clip" -Dokumente verstehe ich nicht, warum dies den Hintergrund vollständig entfernt.

Meine Lieblingslösung:

background-image: linear-gradient(transparent, transparent);

Dies ist eine gültige CSS und ich verstehe, wie es funktioniert.

Während die akzeptierte Antwort ein guter Anfang ist, wie andere betont haben, funktioniert sie nur für Eingaben, deren typeist "text". Es gibt eine Vielzahl anderer Eingabetypen, die unter iOS auch als Textfelder gerendert werden. Daher müssen wir diese Regel erweitern, um diese anderen Typen zu berücksichtigen.

Hier ist das CSS, mit dem ich Eingabetextfelder und Textbereiche vom inneren Schatten befreie, während das Standard-Styling für Schaltflächen, Kontrollkästchen, Bereichsschieberegler, Datums- / Zeit-Dropdowns und Optionsfelder beibehalten wird, die alle auch mit dem bescheidenen <input>Tag erstellt wurden .

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Das funktioniert bei mir besser. Außerdem muss ich es nicht auf jede Art von Eingabe anwenden (z. B. Text, Telefon, E-Mail usw.).

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}