如何在 Django 表单中设置选择文件按钮的样式

Question

我有一个用户可以上传文件的表单。但是按钮有点平淡。这是一个默认的 html 按钮。你有什么办法可以让我使用 Django 表单来设计那个按钮的样式吗？

这是forms.py文件

public class CustomerEntity : IAuditableEntity
{
    ...
}

这是我的models.py文件

class FileReaderForm(forms.ModelForm):
    class Meta:
        model = FileReaderModel
        fields = ['file'] # I want this file(button) to be styled

这是我的 file_reader.html 文件

class FileReaderModel(models.Model):
    file_name = models.CharField(max_length=100)
    file = models.FileField()
    file_body = models.TextField()
    date_read = models.DateTimeField(default=timezone.now)

    class Meta:
        ordering = ['-date_read']
        verbose_name_plural = "FileReaderModel"

    def __str__(self):
        return str(self.file_name) + " File"

Answer 1

您可以使用 Django 表单字段的输入小部件的 attrs 参数向小部件添加类。

显式创建表单域并将类添加到 attrs 参数中：

class FileReaderForm(forms.ModelForm):
    file = forms.FileField(
        widget=forms.ClearableFileInput(
            attrs=["class": "<your css class goes here>"]
        )
    )
    
    class Meta:
        model = FileReaderModel
        fields = ['file']

查看文档 https://docs.djangoproject.com/en/3.1/ref/forms/widgets/#django.forms.Widget.attrs

Answer 2

按照上述响应（没有尝试但仍然有效）。就我而言，如果您只了解基础知识，我会使用 Vanilla JavaScript，但我有点经验，但它不需要更多的样式经验。

在你的情况下。

<form method="POST" enctype="multipart/form-data">{% csrf_token %}
        {{ form|crispy }}
        <br>
        <button type="submit" id="button_id">Submit</button>
    </form>

var my_button = document.getElementById("myH1");

my_button.style.backgroundColor = "red";

我只是给出了我曾经在我的案例中使用的另一种方法。