Gestaltung einer Schaltfläche input type="file"

Question

Wie gestaltet man eine Eingabe type="file" Taste?

<input type="file" />

Answer 1

Dafür brauchen Sie kein JavaScript! Hier ist eine browserübergreifende Lösung:

Siehe dieses Beispiel! - Es funktioniert in Chrome/FF/IE - (IE10/9/8/7)

Der beste Ansatz wäre, ein benutzerdefiniertes Beschriftungselement mit einer for Attribut, das mit einer versteckt Datei-Eingabeelement. (Das Etikett for Attribut muss mit dem Dateielement id damit dies funktionieren kann).

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

Alternativ können Sie das Datei-Eingabeelement auch direkt mit einer Beschriftung umhüllen: (Beispiel)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

In Bezug auf das Styling, einfach ausblenden 1 das Eingabeelement mit der Attributselektor .

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

Dann müssen Sie nur noch die benutzerdefinierte label Element. (Beispiel) .

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

---

1 - Es ist erwähnenswert, dass Sie das Element ausblenden können, wenn Sie display: none funktioniert es nicht im IE8 und darunter. Beachten Sie auch die Tatsache, dass jQuery validieren prüft keine versteckten Felder standardmäßig. Wenn eines dieser Dinge für Sie ein Problem darstellt, finden Sie hier zwei verschiedene Methoden, um die Eingabe zu verbergen ( 1 , 2 ), die unter diesen Umständen funktionieren.

Answer 2

Die Gestaltung von Dateieingaben ist bekanntermaßen schwierig, da die meisten Browser das Erscheinungsbild weder mit CSS noch mit Javascript ändern.

Auch die Größe der Eingaben wird nicht auf solche reagieren:

<input type="file" style="width:200px">

Stattdessen müssen Sie das Attribut Größe verwenden:

<input type="file" size="60" />

Für ein anspruchsvolleres Styling (z. B. das Ändern des Aussehens der Schaltfläche "Durchsuchen") müssen Sie den trickreichen Ansatz des Überlagerns einer gestalteten Schaltfläche und eines Eingabefeldes über die ursprüngliche Dateieingabe in Betracht ziehen. Der bereits von rm erwähnte Artikel unter www.quirksmode.org/dom/inputfile.html ist die beste, die ich je gesehen habe.

UPDATE

Obwohl es schwierig ist, einen Stil <input> Tag direkt zu verwenden, ist dies problemlos mit Hilfe eines <label> Tag. Siehe Antwort unten von @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Answer 3

Wenn Sie diese Schritte befolgen, können Sie benutzerdefinierte Stile für Ihr Datei-Upload-Formular erstellen:

1. Dies ist das einfache HTML-Formular (bitte lesen Sie die HTML-Kommentare, die ich hier unten geschrieben habe)

   <form action="#type your action here" method="POST" enctype="multipart/form-data">
     <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
     <!-- this is your file input tag, so i hide it!-->
     <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
     <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
     <input type="submit" value='submit' >
   </form>

2. dann verwenden Sie dieses einfache Skript, um das Klick-Ereignis an das Datei-Input-Tag zu übergeben.

   function getFile(){
        document.getElementById("upfile").click();
   }

   Jetzt können Sie jede Art von Formatierung verwenden, ohne sich Gedanken darüber machen zu müssen, wie Sie die Standardformate ändern.

Ich weiß das sehr gut, weil ich seit anderthalb Monaten versuche, die Standardstile zu ändern. Glauben Sie mir, es ist sehr schwierig, weil verschiedene Browser unterschiedliche Upload-Eingabe-Tags haben. Verwenden Sie also dieses, um Ihre eigenen Upload-Formulare zu erstellen. Hier ist der vollständige AUTOMATED UPLOAD-Code.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}

<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>

Answer 4

::file-selector-button

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

Dies ist ein neuer Selektor, der für die Gestaltung der Dateiauswahlschaltfläche verwendet werden kann. Er bietet volle Unterstützung für aktuelle Browser-Versionen.

input[type=file]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload">
</form>

Ich war der Meinung, dass diese Antwort notwendig ist, da die meisten Antworten hier veraltet sind.

Answer 5

Alle Rendering-Engines erzeugen automatisch eine Schaltfläche, wenn ein <input type="file"> erstellt wird. In der Vergangenheit war diese Schaltfläche völlig unstilisierbar. Allerdings haben Trident und WebKit Haken durch Pseudo-Elemente hinzugefügt.

Dreizack

Ab IE10 kann die Dateieingabe-Schaltfläche mit dem Stilelement ::-ms-browse Pseudo-Element. Grundsätzlich können alle CSS-Regeln, die Sie auf eine normale Schaltfläche anwenden, auch auf das Pseudo-Element angewendet werden. Zum Beispiel:

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

Dies wird im IE10 unter Windows 8 wie folgt angezeigt:

WebKit

WebKit bietet einen Hook für seine Datei-Eingabe-Schaltfläche mit dem ::-webkit-file-upload-button Pseudo-Element. Auch hier kann so ziemlich jede CSS-Regel angewendet werden, daher funktioniert das Trident-Beispiel auch hier:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

Dies wird in Chrome 26 unter OS X wie folgt angezeigt: