将输入文件替换为表单中我自己的按钮

基本上我想隐藏输入文件并使用按钮来选择表单中的文件。
如果我使用<label for="input-file">Label</label>当我单击标签时，我可以选择一个文件，但我希望成为一个按钮，或者至少看起来像一个按钮。
这里有一个JSFiddle 中的代码示例 :

input[type=file] { display: none; }

<form>
    <input type="file" id="input-file">
    <label for="input-file">
        <button>Button</button>
    </label>
    <input type="submit">
</form>

如果我在标签中添加一个按钮，则它充当提交按钮，如果我指定其类型，则单击时不会执行任何操作。

有没有办法使用我的按钮或按钮外观控件而不是使用input type="file"?
它必须是一个 HTML-CSS 解决方案，没有 JS 或任何框架。

EDIT:

这段 CSS 代码似乎使label看起来像一个标准按钮：

label {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-align: center;
    padding: 2px 6px 3px;
    border: 2px outset buttonface;
    font: 13.3333px Arial;
}

您将通过几行 CSS 来实现这一点。Fiddle

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>