How to add css in django Updateview or Create view form

Question

I am working on a project, and my designer gave me the design, so I want to mimic the input forms which are in the design, to do that I need to add css in my form object.

If in the case of django function based view, It is easy to addcss by creating forms.py files and add css as follows. adding css class in django forms

I also tried to inject css class using jquery, but I couldn't succed. Injecting css class in html forms element using jquery

myapp/forms.py

But how do I add custom css in the form field, when using class based view.

class ItemUpdateView(UpdateView):
    model = Item
    fields = ('name','tag', 'category', 'company', 'price',)

How do I add the custom class to name, tag, category field.

Answer 1

You can define form_class attribute on your update view and add css to that form.

class ItemUpdateView(UpdateView):
    form_class = ItemForm

ItemForm can be a ModelForm and you can customize it as described here: https://docs.djangoproject.com/en/2.2/topics/forms/modelforms/#overriding-the-default-fields

Answer 2

When django generates html from form fields, it automatically add it as "id_fieldName". So you can add css with javascript on frontend.

<script>
    document.getElementById("id_company").classList.add("class name");
</script>