Datei-Upload Formularfeld Design anpassen

Hallo zusammen,

ich habe ein Kontaktformular mittels Formulargenerator erstellt und das Design entsprechend angepasst, nur das Datei-Upload Feld macht mir Schwierigkeiten. Ich kann zwar Höhe, Breite und ein paar andere Styles darauf anwenden, aber so richtig funktioniert das nicht. Ich würde gerne dieses Formularfeld an das Design der Webseite anpassen wie die anderen Felder auch.
Folgendes möchte ich erreichen:
- Beschriftung von Button "Durchsuchen..." auf "Durchsuchen"
- Hintergrundfarbe vom liken Bereich wo der ausgewählte Dateiname steht ändern
- Rahmen mit border und border-radius hinzufügen
- Button-Text ändern in der Schriftgröße, Schriftfarbe und Schriftbreite
- Hintergrundfarbe von Button Durchsuchen ändern

Gibt es eine Möglichkeit dieses Formularfeld dem eigenen Design anzupassen?
Für Tipps und Hinweise dazu wäre ich sehr dankbar.


Gruß
Thomas

Hallo Thomas,

das sind Elemente, die je nach Betriebssystem und Browser unterschiedlich sind. Mir einem JavaScript kann so etwas „überschreiben“.

In manchen Browsern kann man für Formularfelder die Vorgaben des Browsers und Betriebssystems mit dieser CSS-Eigenschaft komplett entfernen:

Code:

---

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

---

Ob das beim Upload-Feld weiter hilft, weiß ich aber nicht.

Hallo zusammen,

ich habe jetzt eine passende Vorlage mit JavaScript für ein Upload-Feld gefunden und testweise in die Homepage eingebunden. Aber dabei ist mir vermutlich ein Fehler unterlaufen den ich leider bislang nicht finden konnte. Denn wenn man nun auf den Button "Durchsuchen" klickt sieht man nur noch eine leere Webseite anstatt, dass sich der Windows-Explorer öffnet für die Dateiauswahl. Welcher Fehler könnte mir da unterlaufen sein? Kann mir hierzu bitte jemand mitteilen woran das Problem liegt.
Link zur Vorlage vom Upload-Feld: https://itnext.io/how-to-make-a-cust...t-c39e3f981b06
Link zur Homepage mit der Vorlage: http://sub.musikverein-hirschzell.de...kt-intern.html
Nachfolgend der von mir verwendete Code.

HTML

HTML-Code:

---

<div class="input-container">
    <input id="real-input" type="file">
        <button class="browse-btn">Durchsuchen</button>
    <span class="file-info">Datei auswählen</span>
</div>

---

CSS

Code:

---

.input-container {
    height:22px;
    width:352px;
    background-color:#ffffe1;
    border:1px solid #707070;
    border-radius:4px;
}

input[type='file'] {
    display: none;
}

.file-info {
    display: block;
    margin-left:5px;
    font-size:0.9em;
    color:#6d6d6d;
}

.browse-btn {
    text-align:center;
    padding:4px;
    color:#fff8ea;
    font-size:12px;
    font-weight:bold;
    text-decoration:none;
    cursor:pointer;
    border:none;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    background-image:linear-gradient(to bottom, #a29c90, #544f43 55%, #544f43);
}

.browse-btn:hover {
    color:#600;
    background-image:linear-gradient(to bottom, #f0efe5, #a49e92 55%, #a49e92);
    }

button.browse-btn {
    width:116px;
}

---

JavaScript

Code:

---

const uploadButton = document.querySelector('.browse-btn');
const fileInfo = document.querySelector('.file-info');
const realInput = document.getElementById('real-input');

uploadButton.addEventListener('click', (e) => {
  realInput.click();
});

realInput.addEventListener('change', () => {
  const name = realInput.value.split(/\\|\//).pop();
  const truncated = name.length > 20
    ? name.substr(name.length - 20)
    : name;
 
  fileInfo.innerHTML = truncated;
});

---

Danke!

Gruß
Thomas

Dein Script arbeitet noch nicht richtig. In der Console wird ein JS-Fehler ausgegeben.

Binde das Script upload.js nicht im head ein, sondern nach dem Formular-Element oder einfach am Ende des body.

Danke für die schnelle Antwort. Das hatte ich auch schon vermutet, dass hier ein Problem mit JavaScript vorliegt.
Der JavaScript-Code ist valide und wird mit <script src="files/hirschzell/content/scripts/upload.js"></script> unter Head-Tags im Seitenlayout eingebunden.
Was könnte die Ursache dafür sein, dass der Code nicht richtig arbeitet?

Zitat:

---

Zitat von rusty

Binde das Script upload.js nicht im head ein, sondern nach dem Formular-Element oder einfach am Ende des body.

---

Hier geht es nicht um Validität sondern um eine sinnvolle Reihenfolge. Das Script wird sofort ausgeführt – also bereits im Head. Da sich der Code auf bestimmte HTML-Elemente bezieht, kann dies so nicht funktionieren, da diese Elemente ja erst weiter unten im HTML erwähnt werden. Also: Erst das HTML-Markup, dann das Script!

Oder man packt ein document.ready() um die Funktion. Dann geht es auch im Head.