如何调整Django的文件选择器窗体按钮？ [英] How can you style Django's file picker form button?

问题描述

我试图对我的Django 文件上传按钮进行风格，但由于它是通过表单处理的，并且没有明确地写在模板中的HTML中，因此我无法直接使用HTML和CSS来设置样式，用于其他按钮类型输入。

I am attempting to style my Django file upload button, but since it's handled through the form and not explicitly written in the HTML within the template I cannot style it directly with HTML and CSS like I can for other buttons of type input.

我试图在我的 forms.py 中添加我的CSS类，

I've attempted to add my CSS class within my forms.py, but it is placing the vanilla default Django file upload button on top of my CSS styled button.

我的代码如下：

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中定义 / code> class like like：

I also tried defining a widget within my Meta class like so:

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

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

but that had the same effect as my first attempt.

有不同的方法来完成这个或有一些逻辑错误

Is there a different way of accomplishing this or are there some logical errors that you can spot within my code?

推荐答案

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/rel =nofollow>此处。

For posterity's sake here is the solution which I found using Bootstrap here.

.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>

这篇关于如何调整Django的文件选择器窗体按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！