upload Design?

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- upload Design? »

bjpage

Tripel-As

Dabei seit: 20.10.2002

Beiträge: 205

Sonntag, 15. Dezember 2002, 20:40

Ich habe auf meiner Seite verschiedene Formulare.

Jetzt wollte ich meine Formularelemente grafisch veränden.
Bei normalen Feldelementen ist das ja machbar, aber...

Wie kann ich bei einem Datei-Upload den "Durchsuchen"-Button gestalten?? Und wie das Textfeld???

blankandjonespage.de

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »bjpage« (15. Dezember 2002, 20:41)

P@cman

Doppel-As

Dabei seit: 20.10.2002

Beiträge: 120

Dienstag, 17. Dezember 2002, 18:35

Dazu musst du CSS benutzen.

.input {
font-family:Tahoma, Verdana, Arial;
color: #353535;
font-size: 8pt;
font-weight: bold;
border-size: 1px;
border-color: #353535;
background: #00ff00;
}

hier mal ein Beispiel

die anderen Befehle kenn ich nicht genau, werden wahrscheinlich wie in HTML textarea, radio, checkbox etc heissen. Kannst ja auch mal bei selfthtml.teamone.de suchen.

Besucht die DnD Clan-Site www.clan-dnd.com oder das Board http://clan-dnd.com/wbboard

mat

Routinier

Dabei seit: 05.12.2002

Beiträge: 383

Dienstag, 17. Dezember 2002, 19:51

@P@cman:
änder'

Zitat

.input {
...

Zitat

input {
...

um, dann stimmts.

Es ist nicht leicht, den "Durchsuchen"-Button zu ändern, da er mit dem Eingabefeld zusammenhängt.
Ich empfehle dir deshalb, den "Durchsuchen"-Kram zu verstecken.

	Quellcode
1	<input type=file style=visibility:hidden id=b>

oder besser noch:

	Quellcode
1	<input type=file style=display:none id=b>

Jetzt kannst du einen normalen Button eingügen und mit Hilfe von JavaScript das "Durchsuchen" auslösen:

	Quellcode
1	onclick=document.getElementById("b").click()

Das Ganze schaut dann so aus:

Quellcode

<html><head><title>Button ersetzt Dursuchen-Kram</title></head><body>
<input type=file style=display:none id=b>
<input type=button onclick=document.getElementById("b").click() value=Suchen>
</body></html>

Wenn du den Dateipfad anzeigen lassen willst, ist das durch JavaScript auch kein Problem:

Quellcode

<html><head><title>Button ersetzt Dursuchen-Kram</title></head><body>
<input type=file style=display:none id=b>
<input type=button onclick=document.getElementById("b").click();document.getElementById("anzeige").value=document.getElementById("b").value value=Suchen>
<hr>
<input id=anzeige>
</body></html>

Wenn der Pfad in der Anzeige allerdings geändert wird, durch Editieren des Benutzers, hat das keine Wirkung auf das File, das hochgeladen werden soll. Es hat auch keinen Zweck, den Pfad mit JavaScript zurückzukopieren, da JavaScript dies nicht erlaubt. Sonst könnte man beliebige Dateien eines Besucher einer Homepage hochladen. Setze deshalb noch ein readonly ein:

Quellcode

<html><head><title>Button ersetzt Dursuchen-Kram</title></head><body>
<input type=file style=display:none id=b>
<input type=button onclick=document.getElementById("b").click();document.getElementById("anzeige").value=document.getElementById("b").value value=Suchen>
<hr>
<input id=anzeige readonly>
</body></html>

Jetzt kannst du wie gewohnt alle Elemente mit CSS nach Belieben anpassen.

PS: Jetzt schreib ich scho ne halbe Stunde an der Antwort rum, jetzt schick ich aber ab.

bjpage

Tripel-As

Dabei seit: 20.10.2002

Beiträge: 205

Mittwoch, 18. Dezember 2002, 18:53

@mat:

Ich hab Deinen Quelltext mal kopiert.

PROBLEM: Es wird garnichts angezeigt. Weder ein Textfeld, noch der "Suchen"-Button.

HELP!!

blankandjonespage.de

mat

Routinier

Dabei seit: 05.12.2002

Beiträge: 383

Mittwoch, 18. Dezember 2002, 19:04

Was? vesteh' ich net.

Ok, probier folgenden Code. Ich hab' ihn etwas mehr dem XML-Standard angepasst.

Quellcode

<html>
  <head>
    <title>Button ersetzt Dursuchen-Kram</title>
  </head>
  <body>
    <script language="javascript">
      function go()
      {
        document.a.b.click();
        document.a.anzeige.value = document.a.b.value;
      }
    </script>
    <form id="a" name="a">
      <input type="file" style="display:none" id="b" name="b">
      <input type="button" onclick="go();" value="Suchen">
      <hr>
      <input id="anzeige" name="anzeige" readonly>
    </form>
  </body>
</html>

bjpage

Tripel-As

Dabei seit: 20.10.2002

Beiträge: 205

Donnerstag, 19. Dezember 2002, 07:40

Danke, jetzt klappts.

Stay tuned... Christian
(Ich Vote für Dich!)

blankandjonespage.de

Sebian

Haudegen

Dabei seit: 14.05.2003

Beiträge: 645

Donnerstag, 13. November 2003, 19:29

Hab auch so eine Frage:

Wie gebe ich ein Bild als Hintergrund in einTextfeld?

Ich meine für das große wo die Nachricht steht.

Und kann man das auch so machen, das der Hintergrund seine fixe Postition nicht verändert wenn ich runterscrolle?

Crush

Kaiser