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

Issue

I don't understand where to add the class name so I can change the background color of the checkbox.

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>

I'm looking where to add:

CSS file

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

(I took it from w3school)

Solution

First of all, the part of the CSS you've taken from the example code will not work on its own. When you look at the complete example, it actually removes the original checkboxes and replaces them with new ones done entirely in CSS so they can look and behave a certain way. This means you will need to include the entire CSS code to make the checkboxes look like in the example and change color when selected.

Once you have that done, you can put this in your buyer_form.html code:

<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>

Answered By - IvyChu