自定义样式化浏览输入按钮的问题

Question

我正在尝试使用自定义样式的浏览按钮。要实现这一点，我有这个HTML代码：

<label class="usp-label usp-label-files usp-label-file usp-label-file-single" for="usp-file-single">Image/Logo <span class="required">*</span></label>
<div id="file">Browse</div>
<span class="small-text">max size 5 MB</span>

的CSS：

.usp-pro-form label {
    color: #333;
    display: block;
    font-size: 1.3em;
    font-weight: 600;
    margin: 0.25em 0;
}

#file {
    display:none;
    background-color:  #e8e8e8;
    border-radius: 3px;
    box-sizing: border-box;
    color: #333;
    font-size: 1.2em;
    font-weight: 600;
    height: 32px;
    padding: 6px 8px;
    text-align: center;
    width: 15%;
}

使用Javascript：

jQuery(document).ready(function($) {
var wrapper=$('<div/>').css({height:0,width:0,'overflow':'hidden'}); 
var fileInput =  $(':file').wrap(wrapper); 
fileInput.change(function(){$this = $(this); $('#file').text($this.val());
}); 
$('#file').click(function(){alert('bla');    fileInput.click();
}).show();});

因此，浏览按钮应该显示为灰色背景，而标签应该只是带有白色背景的黑色文本。相反它看起来像这样：

知道为什么吗？