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

03/07/2016 16:40 #Saiirex#1
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:

[Only registered and activated users can see links. Click Here To Register...]

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?
03/07/2016 18:28 .Traze™#2
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...
03/07/2016 20:33 Undaground#3
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
03/07/2016 22:12 KingDingD0ng#4
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.
-> [Only registered and activated users can see links. Click Here To Register...]

Greetz
03/08/2016 00:23 Devsome#5
Du kannst den Upload button recht einfach designen.
Kleines Beispiel von meinem image host.

Code:
<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>
Code:
.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: [Only registered and activated users can see links. Click Here To Register...]