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

Question

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

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

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

您需要在forms.py 中替换您的代码，使其看起来像这样：

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

您缺少id 属性，该属性在label 标记的for 属性中使用。请参阅this 答案以深入了解for 标签的用途，以及为什么需要在input 字段上设置id。

不过我可以推荐您使用django-widget-tweaks，它非常好用且易于使用。

完整的工作代码：

确保您已将 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'}))

这种方式是one of proposed 自定义小部件外观的方式。