你如何设置Django的文件选择器表单按钮的样式？

Question

我正在尝试设置我的Django 文件上传按钮的样式,但由于它是通过表单处理而未在模板中的HTML中明确编写的,因此我不能直接使用HTML和CSS来设置样式,就像我可以用于输入类型的其他按钮一样.

我试图在我的内容中添加我的CSS类forms.py,但它将我的CSS样式按钮放在vanilla默认的Django文件上传按钮上.

我的代码如下:

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'})

我也尝试widget在我的Meta班级中定义一个如下:

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

但这与我的第一次尝试具有相同的效果.

是否有不同的方法来实现这一点,或者是否存在一些您可以在我的代码中发现的逻辑错误？

Answer 1

为了后代的缘故，这里是我在这里使用 Bootstrap 找到的解决方案。

.fileUpload {
	position: relative;
	overflow: hidden;
	margin: 10px;
}
.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	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>