你怎麼樣式Django的文件選擇器表單按鈕？

我試圖風格我的Django 文件上傳按鈕，但因爲它是通過表單處理，而不是明確地寫在模板中的HTML我不能直接用HTML和CSS像我可以爲類型輸入的其他按鍵設置樣式。你怎麼樣式Django的文件選擇器表單按鈕？

我試圖在我的forms.py中添加我的CSS類，但它將香草默認的Django文件上傳按鈕放在我的CSS樣式按鈕上。

我的代碼如下：

class FileUploadForm(forms.Form): 
    docFile = forms.FileField(
     label = "Select a CSV file", 
    ) 

    class Meta: 
     model = FileUpload 
     fields = ('docFile') 

    def __init__(self, *args, **kwargs): 
     super(FileUploadForm, self).__init__(*args, **kwargs) 
     self.fields['docFile'].widget.attrs.update({'class': 'my_class'})

我也試過我Meta類中定義widget像這樣：

class Meta: 
     model = FileUpload 
     widgets = { 
      'docFile': forms.FileInput(attrs={'class': 'my_class'}), 
     }

但有我的第一次嘗試同樣的效果。

有沒有實現這一點還是有，你可以在我的代碼中發現一些邏輯錯誤，以不同的方式？

來源

2015-01-13 aus_lacy

只是要具體是......你沒有看到這個類中呈現的HTML（Django的問題）增加的問題？或者你無法覆蓋默認CSS設置（CSS問題）？ – dylrei

我可以看到我的自定義CSS，但問題是，默認的'文件Upload'按鈕觸發那麼該文件選擇器被放置在我的CSS樣式頂部。所以看起來這可能是CSS或Django方面的問題。 –

所以......你看看呈現表單的HTML源代碼，你的按鈕有一個my_class類？那麼這是一個CSS問題。可能的解決方案包括稍後加載CSS和/或添加！important選項或在模板底部執行快速JS調用，以在按鈕上強制使用不同的樣式。 – dylrei

爲後人的緣故，這裏是我發現使用引導here的解決方案。

.fileUpload { 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t margin: 10px; 
 
} 
 
.fileUpload input.upload { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-size: 20px; 
 
\t cursor: pointer; 
 
\t opacity: 0; 
 
\t filter: alpha(opacity=0); 
 
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<div class="fileUpload btn btn-primary"> 
 
    <span>Upload</span> 
 
    <input type="file" class="upload" /> 
 
</div>

來源

2015-01-13 20:29:13

如果你想樣式文件上傳按鈕定義另一個按鈕或鏈接和風格。然後設置它的點擊事件觸發文件上傳按鈕。

HTML：

<div> 
    <a id="browse" class="my_class">Browse</a> 
    <input type="file" name="data" style="display: none" /> 
</div>

的Javascript：

$('#browse').click(function(){ 
    $(this).parent().find('input').click(); 
});

爲了使這項工作在Django形成可以通過一個widget做到這一點。

來源

2015-01-13 19:09:11 nima

我試着使用一個'小部件'如原始問題中所示，但是它與我在'__init __（）'函數中定義屬性時的結果相同。 –

我的意思是一個具有上述html和js的自定義小部件。 – nima

你怎麼樣式Django的文件選擇器表單按鈕？

回答

相關問題