Input (File-Upload): Weite vom Eingabefeld+Button

Computer: Software & Programmierung HTML & CSS
#1

Hi.

Ich bin ziemlich verzweifelt mit dem HTML-File-Uploader.

Ich habe eine Tabelle bzw. eine Box mit mehreren Zeilen, die mehrere Eingabefelder beinhalten:
input type=„text“
textarea type=„text“
Diese haben alle eine gleiche Weite (zB width=„400px“), damit sie ‚schön‘ und gleichlang untereinanderstehen.
Nur den Bilder-Uploader (input type=„file“) bekomme ich nicht in den Griff was die Gesamtlänge angeht. Ich möchte, dass das Eingabefeld plus dem „Durchsuchen…“-Button die gleiche dargestellte Länge hat (also zB 400px), damit auch dieses sich optisch angleicht.
Ich kann zwar über das Attribut „size“ solange variieren, bis es gleichlang ausschaut, aber in anderen Browsern (zB Firefox on Mac) und anderen Sprachen passt es wieder nicht. („size“ regelt ja eigentlich nur die die Größe des Eingabefeldes = Anzahl der Zeichen, und nicht die Gesamtlänge von Feld+Button).

Gibt es eine Möglichkeit (oder einen Trick) das eigensinnige Ding in den Griff zu bekommen…???

Vielen Dank!
Markuss

P.S.: Gibt es die Möglichkeit die Button-Aufschrift und den Button-Style zu ändern?

#2

Moin,

Ich habe eine Tabelle bzw. eine Box mit mehreren Zeilen, die
mehrere Eingabefelder beinhalten:

Dafür braucht man keine Tabelle, insb. wenn man sie nur zum Ausrichten benutzt. Für die Optik ist CSS zuständig, nicht HTML.
Aber das nur so am Rande.

Nur den Bilder-Uploader (input type=„file“) bekomme ich nicht
in den Griff was die Gesamtlänge angeht.

Es gibt Elemente, die man nicht manipulieren kann.

Ich kann zwar über das Attribut „size“ solange variieren

Schonmal mit CSS versucht?

Gibt es eine Möglichkeit (oder einen Trick) das eigensinnige
Ding in den Griff zu bekommen…???

Wenn es nicht mit CSS geht, dann vermutlich nein.

P.S.: Gibt es die Möglichkeit die Button-Aufschrift und den
Button-Style zu ändern?

Nein.

Bedenke auch, dass ein Umstylen solcher Bedienelemente den Nutzer der Website verunsichert.

Freundliche Grüße,
-Efchen

#3

Hallo Markuss,
ich habe selbst danach gesucht und dann einfach ein bisschen „rumgespielt“. Du kannst ein verstecktes DIV mit dem file-input erstellen und dann mit einem eigenen Button dieses Input ansteuern.
GGf. brauchst du ja garkein sichtbares Textinput-Feld für den eigentlichen Dateinamen ?!

So ungefähr :

VG Magnus

#4

Moin,

drei Anmerkungen:

  1. Die Einheit fehlt

  1. Wozu das div außen rum? Ein einzelnes Element ist doch keine Gruppe.

  2. Was macht der Anwender, wenn er kein JavaScript aktiviert hat?
    Barrieren einbauen füe eine kleine optische Unwichtigkeit?

Gruß,
-Efchen

P.S.: Meine Fragen sind eigentlich rhetorisch und bedürfen keiner langen Diskussion. Fragen sind natürlich trotzdem willkommen.

#5

Auch moin :smile:

Das div verschiebt das eigentliche input in einen nicht sichtbaren Bereich, das ist der einzige Grund für’s div.

Die Frage war ja eigentlich, ob’s geht oder nicht. Das Fass „usability und Portabilität“ wollte ich nicht aufmachen.

vg

#6

Moin,

Das div verschiebt das eigentliche input in einen nicht
sichtbaren Bereich, das ist der einzige Grund für’s div.

Du traust dem input wohl nichts zu, oder?
Das kann das input auch selber machen, dazu braucht es kein anderes Element. Das ist wie ein Geschenk erstmal in einen Karton packen, bevor mal es mit Geschenkpapier einwickelt.

Die Frage war ja eigentlich, ob’s geht oder nicht. Das Fass
„usability und Portabilität“ wollte ich nicht aufmachen.

Ich aber :smile:
Ich möchte den Leuten hier zeigen, wo sie sich verbessern können, damit der unsinnige HTML-Code, die vielen überflüssigen Tags und falsche Arbeitsweisen endlich aussterben.

Liebe Grüße,
-Efchen