html - 更改 Django 图片上传字段按钮的背景颜色

Question

我的一个表单中有以下字段，允许用户在 Django 中上传图片:

image = models.ImageField(upload_to=upload_location, null=True, blank=True)

我将它显示为表单表中的一个字段，如下所示:

<form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %}
    <div style="overflow-x:auto;">
        <table class="table-form" style='table-layout:fixed;'>
            <tr>
              <th>Image</th>
              <td>{{ form.image }}</td>
            </tr>
            ...

这是我使用 Chrome 开发者工具检查元素时图像字段的 HTML 的样子:

<input id="id_image" name="image" type="file">

我正在尝试更改按钮背景颜色，文本“No File Chosen”的大小小于按钮文本。

目前我只能在我的 css 中同时更改两者:

#id_image {
 background-color: orange;
}

如何分别为按钮和旁边的文本分配 css？帮助!谢谢

Answer 1

您可以尝试添加一个标签并使用JavaScript 获取文件名。

然后根据需要更改标签的 css。

这将帮助您:

JSFiddle Example