Frage von Serverhoster, 103

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:

Antwort
von Sarkophator, 28

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.

Kommentar von Sarkophator ,

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.

Kommentar von Sarkophator ,

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

Antwort
von atom10, 59

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

Kommentar von Serverhoster ,
Kommentar von atom10 ,

was genau willst du jz anders stylen?

Kommentar von Serverhoster ,

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 :)

Kommentar von atom10 ,

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

Kommentar von Serverhoster ,

und wie mache ich genau den link code?

Antwort
von webflexer, 29

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.

Kommentar von Limearts ,

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.

Kommentar von webflexer ,

Unwichtig wann es genau war..heute gelten andere Standards.

Antwort
von webflexer, 30

Normalerweise kann man den Button nicht per CSS stylen. Mit einem kleinen Trick ist dies jedoch möglich.

http://codepen.io/webflexer/pen/xZNmeJ

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten