改变文件上传按钮样式 input button

<style type="text/css">
 div.fileinputs {
 position: relative;
 }

 div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  border:1px solid red;
 }

 input.file {
  position: relative;
  text-align: right;
  -moz-opacity:0 ;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
 }

</style>

<script>

 /*var W3CDOM = (document.createElement && document.getElementsByTagName);

 function initFileUploads() {
  if (!W3CDOM) return;
  var fakeFileUpload = document.createElement('div');
  fakeFileUpload.className = 'fakefile';
  fakeFileUpload.appendChild(document.createElement('input'));
  var image = document.createElement('img');
  image.src='pix/button_select.gif';
  fakeFileUpload.appendChild(image);
  var x = document.getElementsByTagName('input');
  for (var i=0;i<x.length;i++) {
   if (x[i].type != 'file') continue;
   if (x[i].parentNode.className != 'fileinputs') continue;
   x[i].className = 'file hidden';
   var clone = fakeFileUpload.cloneNode(true);
   x[i].parentNode.appendChild(clone);
   x[i].relatedElement = clone.getElementsByTagName('input')[0];
   x[i].onchange = x[i].onmouseout = function () {
    this.relatedElement.value = this.value;
   }
  }
 }
*/
</script>

改变<input type="file">的“浏览”按钮，其实把这个按钮显示成透明的，在它上面盖了一张图片

<form>
 <div class="fileinputs">
  <input type="file" class="file" οnchange="alert(this.value);document.getElementById('fileT').value=this.value"/>
  <div class="fakefile">
   <input name="fileT"/>
   <img src="button3.gif" />
  </div>
 </div>
</form>

最后

以上就是背后灯泡为你收集整理的改变文件上传按钮样式 input button的全部内容，希望文章能够帮你解决改变文件上传按钮样式 input button所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。