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