Как добавить пользовательский 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>