设置input的样式

css中的 ” 七层重叠法 ” :即网页内容先后顺序分别为:背景边框,负值z-index,display:block,浮动,display:inline-block,z-index:auto,正值z-index,越往后在网页中的层级越靠前,也就是说如果一个z-index值为1或者更高的话,它就会遮挡掉他之前的所有元素。

利用这个法则以及opacity设置透明度,可以模拟一个样式:

<style>
*{
  margin:0;
  padding:0;
}
.uploadbox{
  150px;
  height:150px;
  margin:100px;
  position:relative;
}
.uploadbox input{
  cursor:pointer;
  100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:0;
  filter: alpha(opacity=0);
}
.uploadbox-bg{
  position:absolute;
  100%;
  height:100%;
  border:1px solid #cccccc;
  background:#dfdfdf;
  z-index:1;
}
.uploadbox-bg p,.uploadbox-bg span{
  text-align:center;
}
.uploadbox-bg p{
  font-size:80px;
  color:#999999;
}
.uploadbox-bg span{
  display:block;
  font-size:14px;
  color:#666666;
}
.uploadbox:hover .uploadbox-bg p,.uploadbox:hover .uploadbox-bg span{
  color:blue;
}
</style>

<div class="uploadbox">
  <input type="file" id="uploadbox" value="上传" />
  <div class="uploadbox-bg">
    <p>+</p>
    <span>点击上传</span>
  </div>
</div>

参考文章:http://www.cnblogs.com/ztfjs/p/select.html

注意:文章里面关于select设置样式的方法不兼容ie

原文地址:https://www.cnblogs.com/rachelch/p/7514959.html