Webkit-Eingabedatei, blendet Etikett bei Transformation aus: translateX

Bei Verwendung von -webkit-transform: translateX(0%) in einem übergeordneten Container wird der Dateiname "label" aus dem standardmäßigen <input type="file"> -Element in Chrome entfernt. In Safari wird der Text ebenfalls ausgeblendet, aber bei der Dateiauswahl wird das Symbol für die Datei angezeigt.Webkit-Eingabedatei, blendet Etikett bei Transformation aus: translateX

http://jsfiddle.net/9sZxv/

lediglich das Hinzufügen und eine Klasse wie das Entfernen von:

.transX 
{ 
    -webkit-transform: translateX(0%); 
}

Zum Elternteil div in:

<div id="test1"> 
    <input type="file"> 
</div>

bewirkt, dass der Text No file chosen oder die Dateinamen, wenn ein Datei wird ausgewählt, um zu verschwinden.

Geprüft mit- Win7: Chrome 19 und Safari 5.1

Gibt es eine Lösung oder Abhilfe? Das Dateiauswahlelement ist nicht freundlich zum CSS-Stil und es gibt kein Element, das direkt auf den Textteil verweist, so dass ich nicht weiß, wie ich dieses Problem angehen soll.

Quelle

2012-04-09 WSkid

keine Lösung, aber interessant, wie es bricht nicht, wenn es auf den Body-Tag angewendet wird: http://jsfiddle.net/9sZxv/1/ scheint wie ein Erbe-Problem, aber ich kann nicht scheinen, es zu knacken. – mikevoermans

@mikevoermans, die ein wenig hilft, diese Webanwendung verwendet die Übergänge, um eine mobile App zu emulieren und es hinterlässt mehrere Eigenschaften, nachdem der Übergang abgeschlossen ist. Ich muss vielleicht schauen, ob ich einen "sauberer" beim Übergang fertigstellen kann. – WSkid

Wenn Sie einen Zoom auf das Eingabefeld in Chrome anwenden können Sie sehen, dass es den Text bewegt sich unter:

http://jsfiddle.net/9sZxv/4/

Dies ist definitiv ein Hack, aber Sie können die Datei-Eingabe-Taste unten bewegen auf der gleichen Ebene wie der Text mit diesem CSS:

.transX input::-webkit-file-upload-button { 
    -webkit-transform: translateY(26px); 
}

Und dann stellen sie die Datei Eingang eine negative Spitze zu haben, um es normal aussehen.

.transX 
{ 
    position: relative; 
    overflow: hidden; 
    height: 22px; 
    -webkit-transform: translateX(20px); 
} 

.transX input 
{ 
    padding-bottom: 26px; 
    top: -26px; 
    position: absolute; 
}

Hier ist ein Beispiel: http://jsfiddle.net/9sZxv/2/

Wenn das nicht funktioniert, könnten Sie versuchen, Ihre eigene Datei-Eingabe mit dem Opazität Trick beschrieben hier machen: http://www.quirksmode.org/dom/inputfile.html

Quelle

2012-04-26 19:50:37

Danke! Nicht wirklich eine Lösung pro sagen, aber zumindest zu wissen, was vor sich geht, ist der erste Schritt. – WSkid

Webkit-Eingabedatei, blendet Etikett bei Transformation aus: translateX

Antwort

Verwandte Themen