it-swarm.com.de

IOS-Eingabeschatten entfernen

Auf iOS (Safari 5) muss ich als Eingabeelement (oberer innerer Schatten) Folgendes beachten:

example

Ich möchte den obersten Schatten entfernen, der Fehler -webkit-appearance wird nicht gespeichert.

Der aktuelle 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;
}
55
WHITECOLOR

Sie müssen -webkit-appearance: none; verwenden, um die Standardstile IOS zu überschreiben. Wenn Sie nur das Tag input in CSS auswählen, werden die Standardstile IOS nicht überschrieben, da IOS die Stile mithilfe eines Attributselektors input[type=text] hinzufügt. Daher muss Ihr CSS einen Attributselektor verwenden, um die voreingestellten 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;    
}

Nützliche Links:

Mehr über appearance erfahren Sie hier:

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/

136
Mastrianni
background-clip: padding-box;

Scheint, auch die Schatten zu entfernen.

Wie @davidpauljunior erwähnt; Achten Sie darauf, -webkit-appearance an einem allgemeinen Eingangswahlschalter einzustellen.

23
jstnrs

webkit entfernt alle Eigenschaften 

-webkit-appearance: none;

Verwenden Sie die Eigenschaftsfeldschatten, um den Schatten Ihres Eingabeelements zu entfernen

box-shadow: none !important;
5
ShinyJos

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

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

Natürlich war das Einstellen von background-image: none mein erster Versuch, aber das scheint nicht zu funktionieren.

Die Einstellung von background-image: url() funktioniert, aber ich mache mir immer noch Sorgen, eine leere url() zu haben. Obwohl es momentan nur ein schlechtes Gefühl ist.

background-clip: padding-box; scheint den Job ebenfalls zu erledigen, aber selbst wenn ich die "background-clip" -Dokumente gelesen habe, verstehe ich nicht, warum dies den Hintergrund vollständig entfernt. 

Meine Lieblingslösung:

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

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

1