时间戳

首页 > 解决方案 > 如何使用烧瓶和 wtforms 更改复选框的默认背景？

html - 如何使用烧瓶和 wtforms 更改复选框的默认背景？

问题描述

我不明白在哪里添加类名，所以我可以更改复选框的背景颜色。

表格.py

DOMAINS = ['Bakeries', 'Bars and Pubs', 'Butcher Shops', 'Electronics', 'Fashion', 'Fish Shops',
       'Flowers', 'Furniture', 'Gelaterias and Sweets', 'Pets', 'Other', 'Restaurants and Cafés', 'Sport',
       'Supermarkets', 'Vegetables and Fruits']

class MultiCheckboxField(SelectMultipleField):
widget = widgets.ListWidget(prefix_label=False)
option_widget = widgets.CheckboxInput()

class BuyerForm(FlaskForm):
address = StringField(label='Address', validators=[InputRequired()])
domains_fields = [(x, x) for x in DOMAINS]
domains = MultiCheckboxField(label='Domains', choices=domains_fields)
radius = DecimalRangeField(label='Radius (KM)', default=5, validators=[InputRequired()])
submit = SubmitField(label='Search')

买家form.html

            <div class="form-group">
                {{ form.domains.label(class="form-control-label") }}
                {% if form.domains.errors %}
                    {{ form.domains(class="form-control form-control-lg is-invalid") }}
                    <div class="invalid-feedback">
                        {% for error in form.domains.errors %}
                            <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.domains(class="form-control form-control-lg") }}
                {% endif %}
            </div>

我正在寻找在哪里添加：

CSS 文件

.container input:checked ~ .checkmark {
  background-color: #e86875;
}

（我从w3school拿的）

标签： htmlcssflaskcheckboxflask-wtforms

解决方案

首先，您从示例代码中获取的 CSS 部分将无法单独工作。当您查看完整的示例时，它实际上删除了原始复选框并将它们替换为完全在 CSS 中完成的新复选框，因此它们可以以某种方式显示和运行。这意味着您需要包含整个 CSS 代码，以使复选框看起来像示例中的那样，并在选中时更改颜色。

完成后，您可以将其放入您的 buyer_form.html 代码中：

<div class="form-group">
    {{ form.domains.label(class="form-control-label") }}
    {% if form.domains.errors %}
        {{ form.domains(class="form-control form-control-lg is-invalid") }}
        <div class="invalid-feedback">
            {% for error in form.domains.errors %}
                <span>{{ error }}</span>
            {% endfor %}
        </div>
    {% else %}
        {% for domain in form.domains %}
            <label class="container">{{ domain.label() }}
                {{ domain() }}
                <span class="checkmark"></span>
            </label>
        {% endfor %}
    {% endif %}
</div>

推荐阅读