Как добавить пользовательский CSS для меток форм в формы Django?

У меня есть форма django, для которой мне нужно увеличить размер шрифта меток. Исходя из этой дискуссии на StackOverflow, мне нужно добавить CSS класс и применить его к control-label. Как мне это сделать?

Моя форма заполняется следующим образом:

class MyForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)

        fields_to_add = {

        # many fields here, but all in this format. Removed for brevity.
            'purchase_order_number': forms.ChoiceField(
                label="Purchase Order",
                choices=purchase_order_numbers),
        }

        self.fields.update(fields_to_add)

        self = add_classes(self)

Код add_classes выглядит следующим образом:

def add_classes(self):
    """Add styling to form inputs."""
    for key, value in self.fields.items():
        self.fields[key].widget.attrs.update(
            {'class': 'form-control',  # <- this is what I expect to change
             'style': 'font-size: large',}
            )
    return(self)

Я предполагаю, что мне нужно изменить add_classes, чтобы добавить некоторую форму control-label или пользовательский класс типа {'class': 'form-control control-label',, но как только я это сделаю, где я могу указать размер моих меток? Они не указаны в моем HTML шаблоне.

Редактирование: основываясь на предложении, я создал файл с именем customFormStyle.css со следующим содержимым:

.form-control {
    height: 50px;
    background-color: red;
}

и в HTML моей формы включил ссылку на этот CSS:

<link rel="stylesheet" type="text/css" href="/main/static/main/css/customFormStyle.css"/>

... но моя форма не отражает изменения.

Вот мой шаблон, для контекста ({{form}} это место, куда передается форма, у меня нет прямого доступа к HTML для полей):

{% extends "main/_one_column.html" %}
{% comment %} {% load crispy_forms_tags %} {% endcomment %}
{% block maincontent %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/main/static/main/css/customFormStyle.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <form action="" method="POST" class="form" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form}}
    <input class="btn btn-primary" type="submit" value="Save">
    </form>
{% endblock %}

Вы должны добавить пользовательский класс к вашему полю, затем вы должны добавить стиль css, он может быть из файла или непосредственно в вашем html.

В данном случае класс - 'form-control', поэтому будет достаточно следующего стиля

<style>
   .form-control {
     height: 50px;
   }
</style>
Вернуться на верх