用我自己的按钮替换输入文件

基本上我想隐藏输入文件并使用按钮选择表单中的文件。
如果我使用<label for="input-file">Label</label>当我点击标签时，我可以选择一个文件，但我想成为一个按钮或至少看起来像一个按钮。
这里是一个code sample in 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或任何框架。

编辑：

这个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; 
}

来源

2015-11-05 Ionut

你会与几个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"/>

来源

2015-11-05 20:25:25

尼斯，谢谢HTML。我将使文本看起来像默认按钮。 – Ionut

太好了。但我不知道为什么。 – Chao

很好回答谢谢 – Elbaz

您与simplte字体真棒定制FIddle

.image-upload > input 
 
{ 
 
    display: none; 
 
} 
 
.attach-doc 
 
{ 
 
    cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="image-upload"> 
 
    <label for="file-input"> 
 
     <i class="attach-doc fa fa-paperclip fa-2x" aria-hidden="true"></i> 
 
    </label> 
 

 
    <input id="file-input" type="file"/> 
 
</div>

来源

2017-04-04 07:49:01

用我自己的按钮替换输入文件

回答

相关问题