Passen Sie den Stil der Eingabe an[type='file']

Der Stil der Eingabe[type="file"] verhält sich in verschiedenen Browsern unterschiedlich:

1.chrom:

---

2. Firefox:

---

3. Oper:

---

4.ie:

---

5. Kante:

---

Wenn wir außerdem die Höhe von input[type="file"] angeben und seine Zeilenhöhe auf seine Höhe einstellen, erscheint in Chrome ein hässlicher Stil:

---

Die Zeile „Keine Dateien ausgewählt“ ist nicht vertikal zentriert.

In Firefox scheint es besser auszusehen. Nun, ich verwende lieber Firefox. Allerdings ist die Leistung in diesen Browsern inkonsistent und wir müssen eine Kompatibilitätsverarbeitung durchführen.

Dinge:

1. Passen Sie einen Stil an, der einem der Browser ähnelt, und platzieren Sie ihn auf der unteren Ebene

2. „Verstecken“ Sie den vom Browser selbst angezeigten Stil und platzieren Sie opacity: 0; auf das Ereignis, auf das wir klicken

3. Nachdem Sie die Datei ausgewählt oder geändert haben, ändern Sie den Wert der angezeigten Datei.

Code:

html:
<form action="" class="activityForm">
　　<div class="file">
	<label for="file">文件：</label>
	<div class="userdefined-file">
	　　<input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何文件">
	　　<button type="button">上传</button>
	</div>
	<input type="file" name="file" id="file">			
　　</div>
</form>

css: 
.file {
　　position: relative;
　　height: 40px;
　　line-height: 40px;
}
.file label {
　　display: inline-block;
}
.userdefined-file {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 2;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　font-size: 0;  /*应对子元素为 inline-block 引起的外边距*/
}
.userdefined-file input[type="text"] {
　　display: inline-block;
　　vertical-align: middle;
　　padding-right: 14px;
　　padding-left: 14px;
　　width: 220px;
　　box-sizing: border-box;
　　border: 1px solid #ccc;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　overflow: hidden;
　　text-overflow: ellipsis;
　　white-space: nowrap;
}
.userdefined-file button {
　　display: inline-block;
　　vertical-align: middle;
　　width: 80px;
　　text-align: center;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　background-color: #f54;
　　border: none;
　　color: #fff;
　　cursor: pointer;
}
.file input[type="file"] {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 3;
　　opacity: 0;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　cursor: pointer;
}

js:
document.getElementById("file").onchange = function() {
    document.getElementById("userdefinedFile").value = document.getElementById("file").value;
}

Nach der Verarbeitung auf diese Weise ist die Leistung in verschiedenen Browsern konsistent:

1. In Chrome, wenn keine Datei ausgewählt ist:

---

2. Nach Auswahl der Datei in Firefox: