如何为Django的forms.MultipleChoiceField（CheckboxSelectMultiple）添加文本框？

当使用forms.Select作为MultipleChoiceField的组件时，{% bootstrap_field %}会自动给字段套上带边框的文本框容器，但切换为CheckboxSelectMultiple后默认不会生成这个容器，下面是几种可行的解决办法：

方法1：手动编写模板结构补充容器 #

放弃{% bootstrap_field %}的自动渲染逻辑，手动构建字段结构，给复选框组添加模拟文本框的边框容器：

<div class="col-xs-5">
  <div class="form-group">
    <label class="control-label">{{ offer_form.segmentation.label }}</label>
    <!-- 用form-control和border类模拟下拉框的文本框样式 -->
    <div class="form-control p-3 border">
      {% for choice in offer_form.segmentation %}
        <div class="form-check mb-2">
          {{ choice.tag }}
          <label class="form-check-label" for="{{ choice.id_for_label }}">
            {{ choice.choice_label }}
          </label>
        </div>
      {% endfor %}
    </div>
    <!-- 保留错误提示逻辑 -->
    {% if offer_form.segmentation.errors %}
      <small class="text-danger">{{ offer_form.segmentation.errors.0 }}</small>
    {% endif %}
  </div>
</div>

方法2：自定义Widget修改渲染逻辑 #

继承CheckboxSelectMultiple组件，修改它的上下文属性，让外层容器自动带上样式类：

from django.forms.widgets import CheckboxSelectMultiple

class StyledCheckboxSelectMultiple(CheckboxSelectMultiple):
    def get_context(self, name, value, attrs):
        context = super().get_context(name, value, attrs)
        # 给组件外层容器添加上下文样式
        context['widget']['attrs']['class'] = 'form-control border p-3'
        return context

# 在表单字段中使用自定义组件
segmentation = forms.MultipleChoiceField(
    widget=StyledCheckboxSelectMultiple,  
    choices=SEGMENTATION                                
)

修改完成后，模板中仍可使用{% bootstrap_field offer_form.segmentation %}，即可渲染出带边框的文本框容器。

方法3：添加自定义CSS快速实现 #

如果不想修改模板和表单代码，直接给字段外层套一个带自定义样式的容器：

<style>
  .checkbox-box {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 10px;
    background: #fff;
  }
</style>

<div class="col-xs-5">
  <div class="form-group">
    <label class="control-label">{{ offer_form.segmentation.label }}</label>
    <div class="checkbox-box">
      {% bootstrap_field offer_form.segmentation show_label=False %}
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者ddss12