如何在 django 上设置文件字段按钮的样式？

Question

我一直在尝试设置文件字段上传按钮的样式，但由于它是在 forms.py 而不是 html 上运行的，即使经过我们的调查，我仍然不知道该怎么做。有什么办法可以设置按钮的样式吗？好吧，目标是尝试使用图标而不是按钮。

models.py

    class Post(models.Model):
        text = models.CharField(max_length=200)
        posti = models.ImageField(upload_to='media/images', null=True, blank="True")
        user = models.ForeignKey(User, related_name='imageuser', on_delete=models.CASCADE, default=2)

forms.py（我缺少 text 变量下的 posti = form.ImageField）

    class PostForm(forms.ModelForm):
        text = forms.CharField(widget=forms.TextInput(
            attrs={
                'class': 'form-control',
                'placeholder': 'Add a comment...'
            }
            ))
        class Meta:
            model = Post
            fields = ('text', 'posti')
            exclude = ['author']

uploadimage.html（它在 imagelist 视图上发布图像）

    <div class="container" style="margin-top: 200px; margin-left:50px;">
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <div id="formtext" class="overflow-hidden" type="input">{{ form.text }}</div>
            <div id="formimage" class="overflow-hidden" type="button">{{ form.posti }}</div>
            <button type="submit" class="btn btn-primary mb-2">submit</button>
        </form>
    </div>

Answer 1

我已经很好地找到了我的问题的答案，我刚刚添加了一些 javascript 来解决我的问题。

    <style>
    #custom-button {
        background: rgba(222, 184, 135, 0);
        border-radius: 10px;
        cursor: pointer;
        border: 0px;

    }
    #custom-button:hover {
        background: rgba(13, 177, 40, 0.226);
        border-radius: 10px;
        cursor: pointer;
        border: 0px;

    }
    #custom-text {
        display: None;
    }
</style>
<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="text" class="form-control" placeholder="Add a comment..." required="" id="id_text">
    <input type="file" hidden="hidden" name="posti" accept="image/*" id="id_posti">
    <button type="button" id="custom-button"><i class="far fa-image"></i></button>
    <span id="custom-text">no file choosen, yet</span>
    <button type="submit" class="btn btn-primary mb-2">submit</button>
</form>
<script type="text/javascript">
    const realFileBtn = document.getElementById("id_posti");
    const customBtn = document.getElementById("custom-button");

    customBtn.addEventListener("click", function() {
        realFileBtn.click();
    });

</script>

Answer 2

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ('text', 'posti')
        exclude = ['author']
        widgets = {
            'text': forms.TextInput(attrs={
                'class': 'form-control',
                'placeholder': 'Add a comment...'
            }),
        }