Question

我想在我的模板中将css样式（链接在下面）应用到我的Django布尔形式。 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

您需要在forms.py：

中将代码替换为这样

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

您缺少id属性，该属性在for标记的label属性中使用。有关for标记的详细说明，请参阅this答案，以及为什么需要在id字段设置input。

但是我建议您使用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方法来自定义小部件外观。

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

1 个答案:

完整的工作代码：