Html wie kann ich den durchsuchen button stylen wie bei input?
Hier ist mein button mit input:
--- und hier ist die form die ich eigentlich mit stylen will was ich aber nicht hinbekomme mit stylen:
File:
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.
(Der schließende </button>-Tag sollte natürlich ein schließender </span>-Tag sein...)
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.
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.
Normalerweise kann man den Button nicht per CSS stylen. Mit einem kleinen Trick ist dies jedoch möglich.
kannst du mal irgendwo den schon vorhandenden zeigen, ohne ist es schwerer
unzwar der durchsuch button den will ich stylen aber ich bekomme das net hin bei den upload button habe ich das hinbekommen wenn du mir helfen könntest wäre das richtig cool danke :)
wenn du direkt beum uplaod button ein style hinzufügst änderst du den text daneben der anzeigtt welche datei du ausgewählt hast,
ich glaub wenn du den buttin komplett stylen willst mach dir einfach einen link button den du stylst aber so wie dein Code bisher aussieht würde ich dir das nicht empfehlen;
oder du machst einen eigene mit JS
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.