一个简单的上传按键样式

1.样式图片


2.css部分

1. <style type="text/css">
   
2.                                         .input-file {
   
3. display:inline-block;
   
4. width:85px;
   
5. height:20px;
   
6. line-height:30px;
   
7. background:#ddd;
   
8. text-align:center;
   
9. overflow:hidden;
   
10. position:relative;
    
11. background:url(images/hua_43.jpg);
    
12. }
    
13. .input-file:hover {
    
14. background:url(images/hua_43.jpg);
    
15. }
    
16. .input-file input {
    
17. opacity:0;
    
18. filter:alpha(opacity=0);
    
19. font-size:100px;
    
20. position:absolute;
    
21. top:0;
    
22. right:0;
    
23. }

复制代码

3.html嵌入

1. <a href="javascript:void(0);" class="input-file"><input name='name' type='file' size='50' data-valid-name='图片' data-valid-empty='yes' data-valid-accept='jpg,jpeg,gif,png,bmp'></a>

复制代码

4.效果如下