用我自己的按鈕替換輸入文件

基本上我想隱藏輸入文件並使用按鈕選擇表單中的文件。
如果我使用<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

用我自己的按鈕替換輸入文件

回答

相關問題