你怎么样式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的文件选择器表单按钮？

回答

相关问题