Html wie kann ich den durchsuchen button stylen wie bei input?

... komplette Frage anzeigen

4 Antworten

Neben der bereits genannten Möglichkeit, das über ein div-Element und Javascript zu lösen, geht das ganze mittels dem label-Element auch ganz ohne Javascript: 

https://jsfiddle.net/vxv790x7/

Wenn du das Ganze etwas abenteuerlicher haben möchtest und dir Cross-Browser Support nicht so wichtig ist, dann kannst du auch auf das input-Element des Buttons im Shadow DOM des File-Input-Elements zugreifen. (viele Elemente bestehen an sich aus mehreren anderen Elementen, die aber normalerweise nicht sichtbar und zugänglich sind. Diese befinden sich dann im Shadow DOM des Elements)

Hier ein Beispiel mit o.g. Lösung und die Lösung mit Shadow-DOM:

https://jsfiddle.net/vxv790x7/1/

Wie gesagt, Cross-Browser Support wird etwas schwieriger, habe gerade nicht so Lust mir anzuschauen wie das Element bei den anderen Browsern heißt, daher funktioniert das Shadow DOM Beispiel auch nur in Webkit-Browser. (Chrome, ...) Darüber Bescheid zu wissen kann nicht schaden, würde dir davon aber trotzdem eher abraten.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Sarkophator
20.02.2016, 01:05

Wie gesagt, Cross-Browser Support wird etwas schwieriger, habe gerade nicht so Lust mir anzuschauen wie das Element bei den anderen Browsern heißt, daher funktioniert das Shadow DOM Beispiel auch nur in Webkit-Browser.

Kurzer Nachtrag: Es scheint wohl so als würde das Feature tatsächlich auch nur von Chrome und Opera unterstützt werden.

0
Kommentar von Sarkophator
20.02.2016, 03:56

(Der schließende </button>-Tag sollte natürlich ein schließender </span>-Tag sein...)

0

Noch ein Hinweis, habe mir mal deinen Code bei Pastebin angeschaut!

Das HTML was du da geschrieben hast ist grausam. Sehr viele Fehler.

Dir ist schon bekannt wann und wo der HEAD und der BODY Bereich vorkommen und geschlossen werden?

Und solche Sachen:

<font color="black" size="4">File:</font>

haben in einem HTML-Dokument nichts zu suchen. Das sind Sachen die vor 10 Jahren gemacht wurden und heute nicht dem HTML5 Standard entsprechen.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Limearts
19.02.2016, 23:27

Eigentlich sollte das sogar schon seit mehr als 15 Jahren tabu sein. Spätestens mit der Einführung von CSS2 gab es keinen Grund mehr diesen Weg zu gehen.

0

kannst du mal irgendwo den schon vorhandenden zeigen, ohne ist es schwerer

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?