How to style an Image Field button in Django App

user_13744426 0
Viewed 199

I want to style my Image Field Button (Choose File) with CSS. Currently, its displaying in the default theme. I am using Bootstrap V5.0.1, Django V3.2.12, Python 3.7.6.

Default Image Field Button

First, I tried to identify or add a class or id which I can add and style the button regularly but was unable to add as the button was added by Django Image Field. The Code in my forms.py is given below:

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

Then I used the Hover functionality of the Chrome Developer Tools to identify any leads and found that the button and its area had 2 id's #file-upload-button and #id_image.

enter image description here enter image description here

I tried to add CSS to the above-mentioned id's but did not get the result i desired. I want to style the Choose File Button Below also if possible can i add any bootstrap to the button, any help would be appreciated! Thanks.

enter image description here

HTML-Django Code

<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>
twitter-bootstrap django-forms css django
1 Answers

i was having the same problem and came upon this article https://www.quirksmode.org/dom/inputfile.html

The ideia is to create a useless button and add style to it, then overlap both with the image field button on top, and then set the opacity of the image button to 0.

The image field button will still work, but you will only see the button with the style you add.

user_196906580
Related