Как стилизовать кнопку поля изображения в приложении Django

Я хочу придать стиль кнопке поля изображения (Choose File) с помощью CSS. В настоящее время она отображается в теме по умолчанию. Я использую Bootstrap V5.0.1, Django V3.2.12, Python 3.7.6.

Default Image Field Button

Сначала я попытался определить или добавить класс или id, который я могу добавить и регулярно стилизовать кнопку, но не смог добавить, так как кнопка была добавлена полем изображения Django. Код в моем forms.py приведен ниже:

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

Затем я использовал функцию Hover в Chrome Developer Tools для определения любых зацепок и обнаружил, что кнопка и ее область имеют 2 идентификатора #file-upload-button и #id_image.

enter image description here enter image description here

Я пытался добавить CSS к вышеупомянутым идентификаторам, но не получил желаемого результата. Я хочу стилизовать кнопку Choose File Button Below, а также, если возможно, могу ли я добавить какой-либо bootstrap к кнопке, любая помощь будет оценена по достоинству! Спасибо.

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>

У меня была такая же проблема и я наткнулся на эту статью https://www.quirksmode.org/dom/inputfile.html

Идея состоит в том, чтобы создать бесполезную кнопку и добавить к ней стиль, затем наложить обе на кнопку поля изображения сверху, а затем установить непрозрачность кнопки изображения на 0.

Кнопка поля изображения будет по-прежнему работать, но вы будете видеть только кнопку с добавленным вами стилем.

Вернуться на верх