自定義樣式3

http://www.jb51.net/web/39559.html

<form><a class="btn_addPic" href="javascript:void(0);"><span><em>+</em>添加圖片</span> <input class="filePrew" title="支持jpg、jpeg、gif、png格式，文件小於5M" tabindex="3" type="file" name="pic" size="3"></a></form>  

1. *{margin:0;padding:0;}  
2. a{text-decoration:none;}  
3. .btn_addPic{  
4. display: block;  
5. position: relative;  
6. width: 140px;  
7. height: 39px;  
8. overflow: hidden;  
9. border: 1px solid #EBEBEB;  
10. background: none repeat scroll 0 0 #F3F3F3;  
11. color: #999999;  
12. cursor: pointer;  
13. text-align: center;  
14. }  
15. .btn_addPic span{display: block;line-height: 39px;}  
16. .btn_addPic em {  
17. background:url(http://p7.qhimg.com/t014ce592c1a0b2d489.png) 0 0;  
18. display: inline-block;  
19. width: 18px;  
20. height: 18px;  
21. overflow: hidden;  
22. margin: 10px 5px 10px 0;  
23. line-height: 20em;  
24. vertical-align: middle;  
25. }  
26. .btn_addPic:hover em{background-position:-19px 0;}  
27. .filePrew {  
28. display: block;  
29. position: absolute;  
30. top: 0;  
31. left: 0;  
32. width: 140px;  
33. height: 39px;  
34. font-size: 100px; /* 增大不一樣瀏覽器的可點擊區域 */  
35. opacity: 0; /* 實現的關鍵點 */  
36. filter:alpha(opacity=0);/* 兼容IE */  
37. }