input[type='file']样式改变

原来样式：

修改后样式：

实现：

<a href="javascript:;" class="file">选择文件
    <input type="file">
</a>

样式：

<style type="text/css">
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style> 

事件触发：

$(".a-upload").on("change","input[type='file']",function(){
    var filePath=$(this).val();
}) 

 

鼠标移动会“”显示未选择文件“”

加个title=" "属性即可解决