Styling ClearableFileInput

Using Django Forms & APIs
1

I have the following in a template:

<div class="tag-fl">
    <label>{{ form.photo.label }}</label>
    {{ form.photo }}
</div>

Which expands into the following HTML:

<div class="tag-fl">
    <label>Photo</label>
    Currently: 
    <a href="/media/path/xxx/sample_child-1200x1200.png">
        path/xxx/sample_child-1200x1200.png
    </a>
    <input type="checkbox" name="photo-clear" id="photo-clear_id">
    <label for="photo-clear_id">Clear</label><br>
    Change:
    <input type="file" name="photo" accept="image/*" id="id_photo">
</div>

The visual rendition on the browser is not appealing. Therefore, I wish to style the elements manually. What is the best way to approach this?

  1. Hard-code the current output into the template. Which would require a parametric way of retrieving the href value (how do I do that?)

  2. Split the elements at template level using django-template-languge. I would prefer this but I do not know the ClearableInputFile class attributes or members. (e.g {{ form.photo.url }} gives me nothing). Is there a documentation for this?

2

Figured out how to write the href
<a href="/media/{{ form.photo.value }}">{{ form.photo.value }}</a>

Wishing there is a shorter way to reference the rest of the HTML e.g.:
{{ form.photo.photo-clear }}

but I guess that will be fruitless because then it would be hard to style the stray texts (e.g. Change:)

3

The template for that widget is located in django.forms.templates.django.forms.widgets.clearable_file_input. See Widgets | Django documentation | Django

You can override it so that every instance uses your version, or you could subclass the widget class referencing a different template if you only want to use your version in specific situations.