In one of the forms in my Django application, I have included a field that allows users to upload an image. Here is the code for this field:
image = models.ImageField(upload_to=upload_location, null=True, blank=True)
To display this field in my form table, I use the following setup:
<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>
...
When inspecting this element using Chrome Developer Tools, here is the HTML structure of the image field:
<input id="id_image" name="image" type="file">
I am looking to customize the button background color and adjust the size of the text "No File Chosen" to be smaller than the button text.
https://i.sstatic.net/ivYqn.png
Currently, I can only change both properties simultaneously with the following CSS snippet:
#id_image {
background-color: orange;
}
https://i.sstatic.net/FoC1f.png
How can I apply different styles to the button and the text next to it individually? Any help would be greatly appreciated. Thank you!