Django。如何在布尔表单字段上应用css样式？

Question

我想将css样式（链接如下）应用到我的模板中的Django boolean表单。https://proto.io/freebies/onoff/

我做了这样的事。该样式应用于复选框，但复选框不会将状态“OFF”更改为“ON”。（当我点击它时，它不会做任何事情）

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'}))

有人能告诉我如何更有效地将css样式应用于Django表单吗？

非常感谢。

Answer 1

您需要替换代码，使其在表单中看起来像这样。py：

mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch','id': 'myonoffswitch'}))

您缺少id属性，该属性用于tagtag的for属性中。请参阅此答案以深入解释for标签是什么，以及为什么需要在输入字段上设置id。

然而，我可以推荐您使用django小部件调整，它非常好用。

确保已将css样式应用于模板文件。

# 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'}))

这种方式是定制小部件外观的建议方式之一。