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

Posted 2023-02-22

【中文标题】姜戈。如何在布尔表单字段上应用 css 样式？

【英文标题】：Django. how to apply css style on boolean form field?

【发布时间】：2016-12-16 05:48:19

【问题描述】：

我想在我的模板中将 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 表单？

谢谢

【问题讨论】：

为什么不使用 CSS 框架，如 Bootstrap、Foundation、Semantic UI 等。它会减少很多 UI 工作。

【参考方案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 自定义小部件外观的方式。

【讨论】：

我更改了我的代码，但它仍然无法正常工作。上面的代码是使用带有 form.mixed_load 的 div 类的正确方法吗？如果我使用 django-widget-tweaks，我在哪里放置我的 div 类？如果你能告诉我如何使用小部件调整（即在哪里以及如何放置 div 类？）

@smchae 您的问题是关于使复选框正常工作的问题。我重建了您的问题，并使其与发布的代码示例一起使用。您在评论中提出的问题应作为单独的新问题发布。此外，django-widget-tweaks github 页面的第一行（请参阅我的答案中的链接）说“调整模板中的表单字段呈现......”。所以你不能用它来为你的 div 添加自定义类。您需要像最初一样静态地执行此操作。

非常感谢。您的回答和评论很有帮助！