Firefox und IE haben den Button "Datei auswählen" rechts vom Dateipfad, während WebKit ihn links platziert. Dies sorgt dafür, dass WebKit ihn ebenfalls rechts platziert.
<input type="file">
input[type="file"]{
-webkit-appearance: none;
text-align: left;
-webkit-rtl-ordering: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
float: right;
margin: 0 0 0 10px;
border: 1px solid #aaaaaa;
border-radius: 4px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}
Gibt es einen Grund, warum Sie -moz-linear-gradient haben, wo der Selektor WebKit-spezifisch ist? In diesem Fall
input[type="file"]::-webkit-file-upload-button.Guter Punkt! :)
Ich habe gerade heute Morgen euren SitePoint-Podcast gehört und dann, voila, seid ihr hier und helft mir, Webkit dazu zu bringen, sich anzupassen. Großartig und danke.
Meine Seite steht noch am Anfang.
Ich habe bei Accenture gearbeitet, eine großartige Firma, aber wenig Zeit für HTML-Entwicklung. Fange gerade als Hobby an. Mein Freund, ist es möglich, mit Websites wie dieser seinen Lebensunterhalt zu verdienen? Oder ist das nur dein Hobby?
Andere Frage, ich liebe dieses Kommentar-Design, wie sind diese erstellt! Ich brauche eins wie diesen Kommentarbereich =)
Tolle Arbeit!
Danke
Daniel aus Monterrey
Was soll das?
Hallo,
Die im Beitrag vorgeschlagene Lösung funktioniert genau in Chrome. Danke für die tolle Arbeit. Aber sie wird von Mozilla nicht unterstützt.
Gibt es dafür eine Lösung?
leider funktioniert das anscheinend nicht mehr :( gibt es neue Lösungen?
Es funktioniert und der Upload-Button bleibt auf der rechten Seite, aber der standardmäßige Leerraum des Upload-Buttons auf der rechten Seite ist leer, er richtet den Text "Keine Datei ausgewählt" nicht richtig aus.
Gibt es eine Idee, wie der Text nach links verschoben werden kann?
Hallo Anjali! Der Button kann durch die Verwendung von
positionzur Steuerung der Platzierung weiter nach rechts geschoben werden. Hier ist ein Beispiel: https://codepen.io/geoffgraham/pen/mddmMRpHallo Geoff,
Danke für deine Antwort. Ich wollte den Text nach links ausrichten. Kann der Text https://codepen.io/geoffgraham/pen/mddmMRp "Keine Datei ausgewählt" oder der Dateiname nach der Auswahl links ausgerichtet werden?