html-input-file

html-input-file

demo : http://jsfiddle.net/dipaks2011/2JJsH/14/



http://qianduanblog.com/1174.html

http://dipaksblogonline.blogspot.hk/2012/07/styling-input-type-file.html



 *{margin:0;padding:0;}  
    a{text-decoration:none;}  
    .btn_addPic{  
    display: block;  
    position: relative;  
    width: 140px;  
    height: 39px;  
    overflow: hidden;  
    border: 1px solid #EBEBEB;  
    background: none repeat scroll 0 0 #F3F3F3;  
    color: #999999;  
    cursor: pointer;  
    text-align: center;  
    }  
    .btn_addPic span{display: block;line-height: 39px;}  
    .btn_addPic em {  
    background:url(http://p7.qhimg.com/t014ce592c1a0b2d489.png) 0 0;  
    display: inline-block;  
    width: 18px;  
    height: 18px;  
    overflow: hidden;  
    margin: 10px 5px 10px 0;  
    line-height: 20em;  
    vertical-align: middle;  
    }  
    .btn_addPic:hover em{background-position:-19px 0;}  
    .filePrew {  
    display: block;  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 140px;  
    height: 39px;  
    font-size: 100px; /* 增大不同浏览器的可点击区域 */  
    opacity: 0; /* 实现的关键点 */  
    filter:alpha(opacity=0);/* 兼容IE */  
    }  













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