[erledigt] CSS-Problem filefield
Eingetragen von Ionit (1802)am 14.10.2010 - 15:13 Uhr in
Hallo Freunde,
ich habe hier ein CSS-Problem mit dem "Filefield-Durchsuchen-Botton"
Wenn man im Node-Add-Form ein Bild hochladen will, sieht der "Durchsuchen-Botton" so aus.
Die html-Anweisung für diesen "Durchsuchen-Botton" lautet ...
<input type="file" size="22" id="edit-field-1-profilbild-0-upload" class="form-file" accept="png,gif,jpg,jpeg" name="files[field_1_profilbild_0]">
Nun dachte ich man kann das Aussehen des Botton "einfach" mit CSS überschreiben - ich möchte eine andere Hintergrundfarbe und der Rahmen soll anders aussehen.
ich verwende .....
input#edit-field-1-profilbild-0-upload {
background-color:#5F5F5F;
border:1px solid #AFAFAF;
}Im IE wird die CSS-Anweisung richtig angezeigt.
aber im Firefox nicht.
Das Problem an diesem input-Botton ist, dass sich vor dem Botton ein "Pseudo-Textfeld (1)" befindet - dieses "Pseudo-Textfeld" nimmt zwar die neue Hintergrundfarbe an - aber die Border-Anweisung wird völlig ignoriert - der "Durchsuchen-Botton(2)" ignoriert sämtliche CSS-Anweisungen (der Rahmen left/top ist weiterhin weiss).
Ich probiere hier schon seit einer Stunde herum, bekomme das Problem aber nicht gelöst.
Kann mir vielleicht von Euch jemand auf die Sprüngen helfen wie ich Firefox dazu bringen kann die CSS-Anweisung zu akzeptieren??
Normalerweise komme ich mit CSS gut klar aber hier verzweifel ich.
Danke und Gruß
Matthias
- Anmelden oder Registrieren um Kommentare zu schreiben
Tja - ich habe gerade
am 14.10.2010 - 15:42 Uhr
Tja - ich habe gerade gelesen, dass es sich bei input file um ein vom System vorgegebenes Element handelt welches man nicht mit CSS verändern kann. Es gibt dazu einen Javascript-Hack aber ich bin mir nicht sicher ob das eie gute Idee wäre.
Jetzt habe ich so viel Zeit verbraten und jetzt das - dieser System-Botton passt für mein Design überhaupt nicht.
Ich könnte hier in den Eimer brechen! (höflich formuliert)
Das Upload-Feld, ein File
am 14.10.2010 - 15:45 Uhr
Das Upload-Feld, ein File input field, wird je nach Browser unterschiedlich dargestellt.
Vielleicht hilft dir ja folgender Link: http://www.quirksmode.org/dom/inputfile.html
Hier wird sowohl ein normaler CSS/HTML-Trick beschrieben und der Javascript-Hack.
Hallo, danke für den
am 14.10.2010 - 16:18 Uhr
Hallo,
danke für den Link.
Der CSS-Trick funktioniert sehr gut.
Naja - hab sehr viel Zeit verloren aber nun ist es genau so wie ich es haben wollte.
Dank Dir!
Schöne Grüße Matthias