input样式l修改和焦点事件转移

一 label

<input type="file"  id="male" style="display: none;"></input>

 <label  for="male" style="background:url(' http://fgg.natali.com.cn/resources/images/1.jpg');width:130px;height:130px;display: block;"></label>

lable标签的 for属性等于input的id，然后设置input隐藏就可以，然后设置这个lable的各种样式就是代表了这个input，这个是简单的方法

 

二 用div设置img图片，input绝对定位覆盖这个div，然后input设置opcity：0

.box{

    position: relative;width:130px;height:130px;

}

#file{

    width:100%;height:100%;

     position:absolute;z-index: 5;left: 0;top: 0;  cursor: pointer;

     opacity: 0;

}

.dimg{

position: relative;width: 100%;height: 100%;  cursor: pointer;

}

 

    <div class="box">

      <input type="file" id="file"></input>

      <div class="dimg">

      <img src=" http://fgg.natali.com.cn/resources/images/1.jpg">

      </div>

  </div>

这个方法的就是 input是透明的 opcity：0；虽然肉眼看不见，但是它还是有宽高的占据了文档的位置，鼠标看似点击了图片，其实还是点击了input框框，只不过这个input框框透明了而已。这个方法和方法1可以达到同样的效果，但是麻烦，推荐方法1。

这里的input是flie 也可以用其他的type

转载于:https://www.cnblogs.com/fstgshow/p/5454429.html