更改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

您可以尝试添加label并使用JavaScript获取文件名。

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

这将对您有所帮助：

JSFiddle Example