如何使用Flask和WTForms修改复选框的默认背景颜色

核心调整逻辑 #

你使用的自定义复选框CSS依赖「外层带.container类的容器、原生input后紧跟.checkmark元素」的DOM结构，WTForms默认批量渲染的复选框不匹配该结构，按以下步骤修改即可生效：

步骤1：修改HTML模板渲染逻辑 #

将buyer_form.html中原先渲染form.domains的代码替换为手动遍历每个复选框选项的写法，自己控制DOM结构：

<div class="form-group">
    {{ form.domains.label(class="form-control-label") }}
    {% if form.domains.errors %}
        <!-- 外层加container类匹配CSS选择器，同时加is-invalid适配错误样式 -->
        <div class="container is-invalid">
        {% for subfield in form.domains %}
            <label class="checkbox-wrapper">
                {{ subfield() }} <!-- 渲染原生复选框input -->
                <span class="checkmark"></span> <!-- 补充CSS需要的checkmark元素 -->
                {{ subfield.label.text }}
            </label>
        {% endfor %}
        </div>
        <div class="invalid-feedback">
            {% for error in form.domains.errors %}
                <span>{{ error }}</span>
            {% endfor %}
        </div>
    {% else %}
        <div class="container">
        {% for subfield in form.domains %}
            <label class="checkbox-wrapper">
                {{ subfield() }}
                <span class="checkmark"></span>
                {{ subfield.label.text }}
            </label>
        {% endfor %}
        </div>
    {% endif %}
</div>

步骤2：补全基础CSS样式 #

你当前的CSS仅定义了选中状态的背景色，还需要补充隐藏原生复选框、定义基础样式的代码，否则效果无法正常显示：

/* 自定义复选框外层容器基础样式 */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

/* 隐藏原生复选框 */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 未选中状态的复选框样式 */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* 鼠标悬停时的背景色 */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* 你原有选中状态的背景色样式 */
.container input:checked ~ .checkmark {
  background-color: #e86875;
}

/* 选中后对勾的基础样式 */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.container input:checked ~ .checkmark:after {
  display: block;
}

/* 对勾的形状样式 */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

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