css修改input type="file" 样式的方法

 

 首先找到了一个网站，可以参考这个网站http://www.quirksmode.org/dom/inputfile.html

另外我们可以想办法把file的背景颜色去掉，position=absolute,z-index=-1，这样隐去file,然后用label 标签里边加上文字，设置样式，具体代码如下

<div style="margin-bottom:20px;">
      <span style="display:inline-block;position:relative;width:100px; height:32px; border:1px solid #ccc;border-radius:4px;text-align:center;line-height:32px;background-image:-moz-linear-gradient(top,#fff,#EAEAEA);background-image:-webkit-gradient(linear,left top,left bottom, color-stop(0,#fff),color-stop(1,#EAEAEA)); ">
          嵌入LOGO
          <input style="height:32px;position:absolute;z-index:1;left:0px;width:100px;top:0;opacity:0;filter:alpha(opacity=0);cursor:pointer;" type="file" class="upload_file1" id="p1" name="p1" size="1" onchange="ajaxUploadFile(this, '&p=1&prefix=1');">
      </span>
    <span>(支持jpg、png、小于2M)</span>
  </div>

 

转载于:https://www.cnblogs.com/yuyu9988/p/3326369.html