[HTML] /CSS] Input type "file" -> Designen etc

[#Saiirex]

Hey, meine Frage ist wie folgt:

Ich schreibe an einem kleinen Imagehoster (ZUM LERNEN!) und habe bereits eine UI wo ich Files auswählen kann.
Diese sieht so aus:



Meine Frage ist:

Wie kann ich
a) Den Button anders stylen oder durch ein Bild ersetzen?
b) Den Text wo "Keine Datei ausgewählt" steht entfernen?
c) In der TextBox links daneben den Pfad zu den ausgewählten Datei anzeigen?

[.Traze™]

Mit dem Text Button bin ich mir nicht sicher aber du kannst einfach z.b
<button id="beispielbild">
<img src=""><Dateien auswählen>
</button>

So müsste es gehen.
Habe es bis jetzt auch nur einmal benutzt.

Den Text musst du wahrscheinlich irgendwo in deinem Script löschen...

[Undaground]

Das inputfield ist im Browsersystem abhängig, zum stylen ist es eher schwierig. Du kannst aber das originalinput hidden und durch ein anderes Element ersetzen was stylebar ist. Es gibt aber auch bereits crossbrowserfähige vorlagen die man umstylen kann

[KingDingD0ng]

Lass HTML 5 einfach raus und schreib dein eigenes Skript mit JS. Dann bist du flexibler.
Ist zwar semantisch nicht so schön aber wie schon gesagt einfach flexibler.

EDIT: Gerade nochmal drüber gelesen.
Dachte du wolltest was anderes. My bad.

Dennoch kannst du alles mit JS gestalten indem du die Browserspezifischen Attribute einfach wegnimmst. und Andere neu zuweist.

EDIT2: Hab nach 2 Sekunden googlen auch eine ähnliche Variante wie vom Vorgänger gefunden.
->

Greetz

[Devsome]

Du kannst den Upload button recht einfach designen.
Kleines Beispiel von meinem image host.

<span class="btn btn-info fileinput-button">
                                <i class="glyphicon glyphicon-plus"></i>
                                <span>Add files...</span>
                                <input type="file" accept="image/*" name="files[]" id="theFiles" multiple/>
                            </span>

.fileinput-button {
	position: relative;
	overflow: hidden;
	display: inline-block;
}
.fileinput-button input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
	font-size: 200px;
	direction: ltr;
	cursor: pointer;
}

So ergibt sich a,b & c
Wird dann so aussehen: