如何在 Django App 中设置图像字段按钮的样式答案

【问题标题】：How to style an Image Field button in Django App如何在 Django App 中设置图像字段按钮的样式
【发布时间】：2022-08-04 19:42:12
【问题描述】：

我想用 CSS 设置我的图像字段按钮（选择文件）的样式。目前，它显示在默认主题中。我正在使用 Bootstrap V5.0.1、Django V3.2.12、Python 3.7.6。

首先，我尝试识别或添加一个类或 ID，我可以定期添加和设置按钮样式，但由于按钮是由 Django Image Field 添加的，因此无法添加。我的 forms.py 中的代码如下：

from django import forms
class ImageUploadForm(forms.Form):
   image = forms.ImageField(label=\'\')

然后我使用 Chrome 开发者工具的悬停功能来识别任何线索，发现按钮及其区域有 2 个 id\'s #file-upload-button 和 #id_image。

我尝试将 CSS 添加到上述 id\'s 但没有得到我想要的结果。如果可能的话，我还想设置下面的选择文件按钮的样式，我可以向按钮添加任何引导程序，我们将不胜感激！谢谢。

HTML-Django 代码

<div class=\"form-group text-center\">
<form method=\"post\" enctype=\"multipart/form-data\">
{% csrf_token %}
{{ form }}
<br>
<button type=\"submit\" id=\"btnUpload\" class=\"btn btn-primary\" style=\"margin-top:20px;\">Upload</button>
</form>
</div>

标签： css django twitter-bootstrap django-forms

【解决方案1】：

我遇到了同样的问题并看到了这篇文章https://www.quirksmode.org/dom/inputfile.html

想法是创建一个无用的按钮并为其添加样式，然后将两者与顶部的图像字段按钮重叠，然后将图像按钮的不透明度设置为0。

图像字段按钮仍然可以使用，但您只会看到带有您添加的样式的按钮。

【讨论】：