如何使用 flask 和 wtforms 更改复选框的默认背景？

Question

我不知道在哪里添加 class 名称以便我可以更改复选框的背景颜色。

form.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')

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 %}
                    {{ form.domains(class="form-control form-control-lg") }}
                {% endif %}
            </div>

我正在寻找添加的地方：

CSS 文件

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

（我从w3school那里拿来的）

Answer 1

首先，您从示例代码中获取的 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>

如何使用 flask 和 wtforms 更改复选框的默认背景？

How to change default background of checkbox using flask and wtforms?

html

css

checkbox

flask

flask-wtforms