css 上传按钮美化

by Quinn Sheng

HTML

<div class="report-file">
  <span>上传文件…</span>
  <input tabindex="3" size="3" class="file-prew" type="file" onchange="document.getElementById('textName').innerHTML=this.value">
</div>
<span id="textName" style="height: 28px;border:1px solid #f1f1f1"></span>

CSS

.report-file {
      display: block;
      position: relative;
      width: 120px;
      height: 28px;
      overflow: hidden;
      border: 1px solid #428bca;
      background: none repeat scroll 0 0 #428bca;
      color: #fff;
      cursor: pointer;
      text-align: center;
      float: left;
      margin-right: 5px;
    }
    
    .report-file span {
      cursor: pointer;
      display: block;
      line-height: 28px;
    }
    
    .file-prew {
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      width: 120px;
      height: 30px;
      font-size: 100px;
      opacity: 0;
      filter: alpha(opacity=0);
    }