Browserspezifische Buttons änderbar?

[StephanBo]

Ich packe es mal hier in die CSS-Rubrik, auch wenn es evtl nicht mit CCS lösbar ist. Aber vielleicht wisst ihr mehr...



Im zweiten Bild erkennt man deutlich, dass es den "Durchsuchen" Button gibt. Im ersten Bild gibt es diesen auch, nur leider deckt sich die Farbe des Buttons mit der Hintergrundfarbe meines Projektes und so wird der Button nicht wirklich sichtbar, sondern nur der Textinhalt des Buttons. Ich benutze folgenden Code :

<tr>
<td width="120px"><strong>Neues Bild 1:</strong></td>
<td valign="middle"><input type="file" name="image1" id="image1" style="width:250px;" /></td>
</tr>

Das Problem ist hier, dass sich bei einer Farbänderungen im style"..." nur das Eingabefeld links vom "Durchsuchen" Button ändert, der Button selber aber unverändert bleibt. Ich schätze mal, da er eben standardmäßig vom Browser bezogen wird.

Das Problem tritt nur beim IE auf (die anderen Browser verwenden andere Farben für den "file"-Button und heben sich so von meinem Hintergrund ab). Meine Frage wäre nun, ob man die Farbe des Buttons hier irgendwie mit einem einfachen Codezusatz ändern kann?

 

[threadi]

Da Du deinen CSS-Code dazu nicht zeigst kann ich nur raten. Ich tippe mal drauf, Du hast per CSS so etwas definiert:

input { background-color: #fff; }

Dadurch beeinflusst Du jegliche input-Elemente, also text, file etc.

Das input-file ist jedoch ein besonderes input-Element. Es handelt sich in den meisten Browsern um eine Browserkomponente die man überhaupt nicht weiter stylen kann. Einige Browser können es doch - z.B. scheinbar deine IE-Version (welche eigentlich?) indem er es ermöglicht per CSS den Rahmen zu entfernen.

Wenn Du das verhindern willst, solltest Du die Styles der Elemente per Klasse unterscheiden. Also im HTML-Code:

<input type="text" name="irgendwas" value="" class="text">

und im CSS:

input.text { background-color: #fff; }

Dadurch erhält ein Element dem Du nicht diese Klasse gegeben hast, auch nicht die Styles und wird auch nicht so dargestellt.

 

[StephanBo]

Hallo threadi,

mit der Klasse hatte ich natürlich schon versucht (genau so vorgegangen, wie du es auch beschreiben hast, nur statt input.text habe ich input.file definiert). Und wie ich oben geschrieben habe, ändert sich der Button leider nicht, sondern nur das manuelle Eingabefeld links vom Button (siehe Bild, wenn Farbcode #111)

Ich spreche im übrigen vom IE8 und 9. Interessant ist vielleicht noch zu erwähnen, dass sich die Hintergrundfarbe bei der Definition einer Klasse für das Inputelement beim IE eben nur auf das manuelle Textfeld beschränkt, bei anderen Browsern jedoch der Hintergrund des eigentlichen Buttons mit einbezogen wird!

Also kann man einen "browserspezifischen" Button (in dem Fall type="file") jetzt nicht farblich ändern?

Alternativ kann ich natürlich die gesamte Zeile in eine Divbox packen (bzw. ein td Feld) und diese farblich ändern. Sieht aber dann leider nicht so schön aus...

 

[threadi]

Achsooo, dir geht es konkret darum input-file zu ändern. Nein, das geht nicht wirklich. Das ist leider eines der wenigen Felder deren browserspezifische Komponenten es meist wenig bis gar nicht zulassen irgendetwas zu verändern. Das ist für die Gestaltung immer ärgerlich, geht aber nicht anders.

Es gibt allerdings Alternativen.
Zum Einen könnte man so einen Upload-Button auch per Flash realisieren. Flash erlaubt eine freie Gestaltung und man kann dann den Button im Flash so gestalten wie man will. Erfordert seitens des Besuchers nur eben installiertes und aktiviertes Flash.
Zum Anderen gibt es imho in jQuery auch eine JavaScript-Funktion die so ein input-file "umbaut", so dass man als Besucher quasi etwas anderes sieht als eigentlich dahinter steckt.

 

[StephanBo]

Ne, Flash geht leider gar nicht. Zu viele Apple-Jünger da draußen...
Ich versuche das ganze jetzt mal mit einem halbtransparenten Hintergrund in einer Divbox. Vielleicht lässt sich optisch damit noch was retten.