如何在Django上设置filefield按钮的样式？

Question

我一直在尝试设计filefield upload按钮的样式，但由于它是在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（我缺少文本变量下的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>