如何隱藏*只有* Django表單中輸入類型文件的按鈕（不是整個元素）？

Question

我剛剛發現這一點：

How to customize <input type="file">?

但它隱藏整個input元素。在我的情況下，我使用的是Django的form，並且有文本「沒有選擇文件」，或者在選擇文件後，文件名顯示出來。我想保留這些位，但只能自定義輸入元素的按鈕部分。

請參閱下面的當前方法。

但我想要的東西，像下面的風格之一，但保留在前面的圖像中的文本。

有沒有辦法做到這一點？

編輯

我想我本來應該更清晰。我看到了所有其他的答案，但我的問題是不同的。首先，我知道如何爲表單類添加屬性。我已經這樣做了。其次，我附上的圖片來自我的代碼。換句話說，我已經在所謂的重複中實現了答案。

我的問題屬於旁邊的實際按鈕，說「瀏覽」的文字。我想樣式按鈕，但保持的文字，因爲這個文本是動態的，並隨用戶操作而改變。

據我所知，其他答案（以及我的假設）是整個元素使用自定義CSS進行樣式化，因此當它隱藏或模糊時，文本也會隱藏起來。

鑑於此，任何人都可以提出答案嗎？

解決方案

感謝@lmgonzalves，我已經意識到，我的問題是隱藏整個元素。我應該只是用自定義按鈕覆蓋按鈕，就像接受的答案一樣。再次感謝！

Answer 1

我已創建演示給你，請檢查：

https://jsfiddle.net/lmgonzalves/uLmLc3xt/5/

的圖標爲font-awesome，這裏是代碼。

HTML：

<label id="upload-file-container" for="photo"> 
    <input id="photo" type="file" name="photo"/> 
    <span class="upload-file-wrapper"> 
     <i class="fa fa-cloud-upload"></i> 
     <span>Click here to upload file</span> 
    </span> 
</label> 

CSS：

#upload-file-container{ 
    position: relative; 
    cursor: pointer; 
} 

#upload-file-container input{ 
    position: relative; 
    left: 150px; /* Maybe you need to adjust this */ 
    top: 5px; 
} 

#upload-file-container .upload-file-wrapper{ 
    position: absolute; 
    left: 0; 
    top: -1px; 
    background-color: lightgray; 
    border: 1px solid gray; 
    padding: 5px 0 6px; 
    width: 250px; 
    text-align: center; 
} 

Answer 2

你應該通過Widgets.attrs設置一個ID或類HTML屬性，並通過CSS定製，就像這樣：

Django表單

class MyForm(forms.Form): 
    name = forms.FileField(widget=forms.FileInput(attrs={'id': 'upload'})) 

CSS

#upload { 
/* ... */ 
} 

幫助鏈接：

• Base Widget classes
• Widget.attrs