Wie kann ich das Erscheinungsbild von Dateieingaben mit CSS3 und JavaScript anpassen?

Eingabedateien mit CSS3 und JavaScript formatieren

Während es möglich ist, das Standardelement „Eingabedatei“ mit CSS3 zu formatieren, sind dies die Anpassungsoptionen beschränkt. Um das Erscheinungsbild der Dateieingabe vollständig anzupassen oder das Browserfenster mit einem alternativen Element auszulösen, können Sie dies mit HTML, CSS3 und JavaScript wie folgt erreichen:

Anpassen mit jQuery

1. HTML: Fügen Sie sowohl die Standarddateieingabe als auch ein div-Element ein, das als benutzerdefiniertes Element dient Schaltfläche.

<div>

2. CSS: Standarddateieingabe ausblenden.

#file {
    display: none;
}

3. jQuery : Wickeln Sie die Dateieingabe in ein Div mit versteckten Dimensionen ein, um versehentliche Klicks zu verhindern. Verwenden Sie das Änderungsereignis, um den benutzerdefinierten Schaltflächentext mit dem ausgewählten Dateipfad zu aktualisieren. Lösen Sie das Dateieingabe-Klickereignis aus, wenn auf die benutzerdefinierte Schaltfläche geklickt wird.

var wrapper = $('<div/>').css({height: 0, width: 0, 'overflow': 'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function() {
    $(this).closest('#file').text($(this).val());
});

$('#file').click(function() {
    fileInput.click();
}).show();

Ergebnis:

Ein benutzerdefiniertes Dateieingabeelement, das über CSS angepasst werden kann und löst beim Klicken das Fenster zum Durchsuchen von Dateien aus.

Das obige ist der detaillierte Inhalt vonWie kann ich das Erscheinungsbild von Dateieingaben mit CSS3 und JavaScript anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!