Formatierung des "Durchsuchen"-Buttons beim input type "file"

[Morten]

Hallo!

Da ich gerade die Homepage meiner Schülerzeitung designe und dort auch eine Möglichkeit einbauen soll, Grüsse (die dann in der Zeitung abgedruckt werden) per Formular an unsere E-Mail-Adresse zu versenden.
Dazu soll es auch eine Möglichkeit geben, ein Bild hochzuladen.

Da ich den <input>'s auf der Homepage nicht das Standart-Design gebe, sondern ein anderes, will ich das ganze auch per CSS bei dem "Durchsuchen"-Buttons bei dem <input type="file"> machen.

So sieht das ganze bisher aus:
<input type="file" name="file" style="background-color:#0099ff;color:#ffffff;font-family:Georgia,serif;font-size:14px;">

Der Teil des <input>'s, in dem der Pfad auf dem Computer angezeigt wird, ist auch richtig formatiert, aber der Durchsuchen-Button will nicht blau werden.
Vorweg: Ich habe es auch schon mit <link href="style.css" rel="stylesheet" type="text/css"> und der Variante, das ganze im Header zu formatieren, versucht, aber es hat nicht geklappt.

Ist es irgendwie möglich, das ganze so mit CSS zu formatieren, dass der Durchsuchen-Button auch so angezeigt wird, wie er es soll?

LG
Morten

[Mathias Brodala]

Hallo Morten.

Ist es irgendwie möglich, das ganze so mit CSS zu formatieren, dass der Durchsuchen-Button auch so angezeigt wird, wie er es soll?

Siehe hierzu das Archiv und das Archiv.

Einen schönen Samstag noch.

Gruß, Mathias

[Morten]

Siehe hierzu das Archiv und das Archiv.

Danke für die schnelle Hilfe!

Die CSS-Idee, dass man einfach einen neuen Button drüberlegt und den anderen unsichtbar macht, ist echt gut.
Werde dann noch ein JavaScript schreiben, was dann den Inhalt vom "echten" file-input in den "unechten" file-input überträgt.

Danke!

LG
Morten

[rfb]

Moin

Ist es irgendwie möglich, das ganze so mit CSS zu formatieren, dass der Durchsuchen-Button auch so angezeigt wird, wie er es soll?

aus Sicherheitsgründen: nein!
Es gibt Ansätze die in die Richtung zielen quasi einen 2ten Button darüberzulegen und diesen zu formatieren und dessen Ergebnis dann per JavaScript an den eigentlichen Button zu übergeben. Schau mal im Archiv, war hier vor ein paar Wochen hier Thema, sieht aber für mich nicht allzu erfolgversprechend aus.

Gruß
rfb

[wahsaga]

hi,

Ist es irgendwie möglich, das ganze so mit CSS zu formatieren, dass der Durchsuchen-Button auch so angezeigt wird, wie er es soll?

Warum das vielen nicht sinnvoll erscheint sinnvoll erscheint, und wie es mit einer JS-Frickel-Lösung halbwegs umsetzbar ist, hatten wir doch erst neulich:
</archiv/2007/1/t145203/>

gruß,
wahsaga

[Morten]

Hallo!

Das ganze ist jetzt für mich zufriedenstellend erledigt.
Falls ein anderer noch einmal das Problem hat, habe ich das ganze in eine Datei geschrieben, die hier:
http://www.with.de/twiki/pub/Zentrale/MortenWith/buttons.htm
erreichbar ist.

Ich habe den CSS-Quellcode der Online-Dokumentation zu dem Thema auf quirksmode.com kopiert und zwei JS-Cödechen geschrieben, mit denen der Text zwischen den beiden Inputs übertragen wird.

LG
Morten

[Skeeve]

Moin!

Falls ein anderer noch einmal das Problem hat, habe ich das ganze in eine Datei geschrieben, die hier:
http://www.with.de/twiki/pub/Zentrale/MortenWith/buttons.htm
erreichbar ist.

Funktioniert nicht zufriedenstellend

Ich habe das gerade angesehn. Senn ich in die freie Fläche zwischen Button und Textfeld klicke oder auf den Bereich über dem Textfeld, öffnet sich bereits der Suchen-Dialog.

Wenn ich hingegen in die rechte Hälfte des Buttons klicke, also alles ab dem "s" von "Durchsuchen...", dann tut sich null und nschts.

Laß solche Spielereien lieber sein.

Ich stand vor einiger Zeit auch vor dem Problem und habe es 2stufig gelöst.

Damit der Kude zufrieden ist, gibt es einen schicken "Upload" Button. Wenn der geklickt wird, erscheint das Standard "Dursuchen" Element mit einem schicken "Hide" Button daneben.

Der Benutzer muß halt jetzt 2 mal klicken, dafür ist aber das heilige CI (auf den ersten Blick) gewahrt.

-- Skeeve