Heim > Web-Frontend > HTML-Tutorial > Passen Sie den Stil der Eingabe an[type='file']

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

WBOY
Freigeben: 2016-09-27 14:05:24
Original
1094 Leute haben es durchsucht

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>
Nach dem Login kopieren
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;
}
Nach dem Login kopieren
js:
document.getElementById("file").onchange = function() {
    document.getElementById("userdefinedFile").value = document.getElementById("file").value;
}
Nach dem Login kopieren
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:

 

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage