Ankündigung

Einklappen
Keine Ankündigung bisher.

Wie kann ich das Design von Button (Upload-Form) ändern und den Text verstecken?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Wie kann ich das Design von Button (Upload-Form) ändern und den Text verstecken?

    Hallo Zusammen,

    ich habe schon einige Zeit recherchiert, aber leider nichts passendes gefunden.

    Ich habe eine Form zum Upload von Bildern, technisch funktioniert auch bereits alles.
    Ich möchte nun das Aussehen des Button ändern, den man klickt, um eine Datei auszuwählen. Auf den Submit-Button verzichte ich in diesem Fall, die Submit-Funktion wird im onChange des Uploads ausgeführt.
    Am liebsten würde ich als Button ein Icon von "FontAwesome" verwenden. Meine Idee war, das irgendwie über die das onClick-Ereignis eines div zu realisieren...

    Nun zum zweiten Teil meiner Frage:
    Neben dem Button taucht der Text "keine Datei ausgewählt" auf, den würde ich gerne ausblenden.

    Hat jemand eine Idee?

    Ich danke im Voraus für eure Hilfe.

    Gruß Henrik

  • #2
    Hallo Zusammen,

    ich konnte das Problem inzwischen selbst lösen:

    PHP-Code:
         <form id="fvis" name="fvis">
          <
    class="fa fa-camera-retro" aria-hidden="true" onclick="finvis.f2.click();"></i>
         </
    form>

        <
    div visibility=hide style="visibility:hidden">

         <
    form id="finvis" action="upload.php" method="post" enctype="multipart/form-data">
          <
    input type="file" id="f2" name="datei" accept="image/*" onchange="form.submit()">
         </
    form>

        </
    div

    Kommentar


    • #3
      1. Wozu die Forum für das Font Awesome Icon?
      2. visibility ist kein Attribut des div Elements.
      3. Selbst wenn es ein Attribut wäre sollte der Wert des Attributs in entsprechenden Zollzeichen "..:" stehen.
      4. style kann man nutzen, besser wäre aber in CSS auszulagern.
      5. visibility:hidden verbraucht trotzdem auf der Seite den Platz, den das Element hätte. display: none hingegen blendet es auch und hält den Platz nicht frei. Das fällt insbesondere auf, wenn nachfolgend weitere Element stehen.

      Kommentar

      Lädt...
      X