Django. how to apply css style on boolean form field? - css

Question

I want to apply css style(link is below) to my Django boolean form in my template.
https://proto.io/freebies/onoff/
I did something like this. The style is applied to the checkbox but the checkbox doesn't change status 'OFF' to 'ON'. (when I click it, it would not do anything)
Template
<div class="onoffswitch">
<span class="onoffswitch-checkbox" id="myonoffswitch" checked>{{form.mixed_load}}</span>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Forms.py
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch'}))
Can someone tell me how to apply css style to Django form more effectively?
Thank you

Answer 1

You need to replace your code to look like this in your forms.py:
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch','id': 'myonoffswitch'}))
You were missing id attribute, which is used in the for attribute of label tag. See this answer for in-depth explanation what is the for tag for, and why do you need to set id on your input field.
However I can recommend you using django-widget-tweaks, which is really nice and easy to use.
Full working code:
Make sure you have css styles applied to the template file.
# template
...
<div class="onoffswitch">
{{ form.mixed_load }}
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
...
# forms.py
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch-checkbox','id': 'myonoffswitch'}))
This way is one of proposed ways to customize widget look.