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

Question

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 %}

Ignacio Villela · Accepted Answer · 2022-07-06 18:33:04Z

1

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>

answered Jul 6, 2022 at 18:33

Ignacio Villela

1507 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asa LeHolland Over a year ago

Thank you for the comment. I have attempted to link the CSS style via file and have updated the description to reflect my attempt, but the change does not appear to be working quite yet. Any additional ideas?

Ignacio Villela Over a year ago

You can verifying if the style is applying to the field in your browser developer console. If appear crossed out, it should suffice add "!important" (without cuotes) to the style, otherwise, you have an error on the class name or style name or the style file is wrong imported.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related