CODEWITHSUNDEEP
pythondjango
Asa LeHolland
Asa LeHolland

Reputation: 462

How to add custom CSS for form labels to Django forms?

I have a django form for which I need to increase the font size of the labels. Based on this StackOverflow discussion, what I need to do is add a CSS class and apply it to the control-label. How do I actually go about doing that?

My form is populated like so:

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)

The add_classes code is as follows:

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)

I assume I need to modify add_classes to add some form of control-label or a custom class like {'class': 'form-control control-label',, but once I do that, where do I actually specify the size of my labels? They are not specified in my HTML template.

Edit: based on the suggestion, I have created a file named customFormStyle.css with the following contents:

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

and in the HTML of my form have included a link to that CSS:

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

...but my form does not reflect the change.

Here is my template, for context ({{form}} is where the form is passed in, I do not have direct access to the HTML for the fields):

{% extends "main/_one_column.html" %}
{% comment %} {% load crispy_forms_tags %} {% endcomment %}
{% block maincontent %}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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 %}

Upvotes: 0

Views: 710

Answers (1)

Ignacio Villela
Ignacio Villela

Reputation: 150

You must add a custom class to your field, then you must add a css style, it can be from a file or directly in your html.

In this case, the class is 'form-control', so the following style would suffice

<style>
   .form-control {
     height: 50px;
   }
</style>

Upvotes: 1

Related Questions