Crispy-Forms: Add CSS Class for One of the Inputs

crispy-forms: add css class for one of the inputs

I see two possibilities:

1. Use CSS

#div_id_name {
    font-weight: 0.8em;
}

2. Override the field template

You can override the field template of your field:

Field('field_name', template='my_field_template.html')

For a reference field template, see site-packages/crispy_forms/templates/bootstrap3/field.html.

(3. Waiting)

There's an open issue on Github for this: https://github.com/maraujop/django-crispy-forms/issues/348

Django-crispy-forms: set css for individual field and inputs

One solution is given here:

• You add the class attributes for the input field via the widget, as also explained in the django docs
• You explicitly add the <label> tags with the correct class in your HTML.

Or, for the label, you can also create the following template filter:

@register.filter(is_safe=True)
def label_with_classes(field, css):
    return field.label_tag(attrs={'class': css})

which you can use like this in your template after you've loaded it with {% load my_filters %}: {{ form.name|label_with_classes:"col-sm-6 col-lg-3" }}

I don't know of an easy way with crispy-forms.

How do I add custom CSS to crispy forms?

As docs says, by default crispy forms using bootstrap, and also provides some template packs for bootstrap, bootstrap3, bootstrap4 and uni-form. see also about Overriding project templates

If you need to custom this crispy forms, you need to create a new custom template for your project, an example crispy_forms/templates/<foobar>/. you can checkout at this path of repository: https://github.com/django-crispy-forms/django-crispy-forms/tree/dev/crispy_forms/templates

---

But, previously crispy forms has templatetags to handle specific field. one of it is {{ form.field_name|as_crispy_field }}, this example below is output of it.

<div id="div_id_email" class="control-group">
  <label for="id_email" class="control-label">Email address</label>
  <div class="controls">
    <input class="form-control" id="id_email" maxlength="254" name="email" required="required" type="email" />
  </div>
</div>

Other options, you can handle it using specific html selectors/attributes inside your forms widget, such as html class, id, style, or else.

For example in your case;

class SignUpForm(forms.ModelForm):

    class Meta:
        model = SignUp
        fields = ['full_name', 'email']
        widgets = {
          'email': forms.EmailInput(attrs={'class': 'form-control custom-class'}),
        }

And then, if you render as {{ form.email|as_crispy_field }}, this should render the html;

<div id="div_id_email" class="control-group">
  <label for="id_email" class="control-label">Email address</label>
  <div class="controls">
    <input class="form-control custom-class" id="id_email" maxlength="254" name="email" required="required" type="email" />
  </div>
</div>

Crispy forms also provides simply configuration inside settings.py, Django fields generate default classes, crispy-forms handles these and adds other classes for compatibility with CSS frameworks. For example a CharField generates an <input class="textinput", for more...

CRISPY_CLASS_CONVERTERS = {
    'textinput': "form-control cst__radius",
    'urlinput': "form-control cst__radius",
    'numberinput': "form-control cst__radius",
    'emailinput': "form-control cst__radius",
    'dateinput': "form-control cst__radius",
    'textarea': "form-control cst__radius",
    'passwordinput': "form-control cst__radius",
    'select': "form-control cst__radius",
}

---

Related Topics