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

【问题标题】：How can you style Django's file picker form button?如何设置 Django 文件选择器表单按钮的样式？
【发布时间】：2015-03-11 20:02:39
【问题描述】：

我正在尝试为我的 Django 文件上传按钮设置样式，但由于它是通过表单处理的，而不是在模板中的 HTML 中明确编写，我无法像我一样直接使用 HTML 和 CSS 设置它的样式对于其他类型的输入按钮。

我试图在我的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'}),
        }

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

是否有不同的方法来完成此操作，或者您可以在我的代码中发现一些逻辑错误？

【问题讨论】：

只是具体一点...是您没有看到在呈现的 HTML 中添加此类的问题（Django 问题）？还是您无法覆盖默认设置的 CSS（CSS 问题）？
我可以看到我的自定义 CSS，但问题是触发文件选择器的默认 File Upload 按钮随后被放置在我的 CSS 样式之上。所以看起来这可能是 CSS 或 Django 方面的问题。
所以...您查看呈现表单的 HTML 源代码，您的按钮有一个 my_class 类？然后这是一个CSS问题。可能的解决方案包括稍后加载您的 CSS 和/或添加 !important 选项或在模板底部执行快速 JS 调用以在按钮上强制使用不同的样式。
@dylrei 是的，它看起来像一个 CSS 问题。我尝试了您的解决方案，但不幸的是没有成功。
看到这个讨论可能会有所帮助：stackoverflow.com/questions/14401550/…

标签： python html css django

【解决方案1】：

为了后代的缘故，这里是我使用 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>

【讨论】：

不使用{{form.as_p}}你是怎么做到的
@JuanMartinZabala，你可以在浏览器的开发者视图中看到id。

【解决方案2】：

如果您想设置文件上传按钮的样式，请定义另一个按钮或链接并设置样式。然后设置它的点击事件触发文件上传按钮。

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 来完成。

【讨论】：

我尝试使用widget，如原始问题所示，但它呈现的结果与我在__init__() 函数中定义属性时的结果相同。
我的意思是一个带有上述 html 和 js 的自定义小部件。