html下拉按钮可以替换,html5 – 在表单中用我自己的按钮替换输入文件

基本上我想隐藏输入文件并使用按钮来选择表单中的文件.

如果我使用< label for =“input-file”> Label< / label>当我点击标签时我会选择一个文件,但我想成为一个按钮或者至少看起来像一个按钮.

这是一个

code sample in JSFiddle：

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

Button

如果我只是标签中的一个按钮,它就像一个提交按钮,如果我指定它的类型,它在点击时什么都不做.

有没有办法使用我的按钮或按钮查看控件而不是使用输入类型=“文件”上传文件？

它必须是HTML-CSS解决方案,没有JS或任何框架.

编辑：

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

label {

appearance: button;

-moz-appearance: button;

-webkit-appearance: button;

text-align: center;

padding: 2px 6px 3px;

border: 2px outset buttonface;

font: 13.3333px Arial;

}