Кнопки форм Django

У меня есть форма заказа, которая должна отображать размеры товара в виде кнопок, но кнопки не регистрируются как выбранные, пока пользователь не нажмет точно на букву размера ('S', 'M' и т.д.) в точном центре кнопки. Щелчок в пространстве между буквой и границей кнопки отмечает ее как выбранную, но при нажатии кнопки Добавить в корзину она отменяет выбор.

class OrderForm(forms.Form):

    def __init__(self, instance, *args, **kwargs):
        super(OrderForm, self).__init__(*args, **kwargs)
        self.instance = instance
    
        self.fields['size'] = forms.ModelChoiceField(
            queryset=self.instance.sizes.all(),
            widget=forms.RadioSelect())

HTML выглядит следующим образом:

{% for choice in order_form.size %}
    <button type="button" class="size-btn">{{ choice }}</button>
{% endfor %} 

Размеры - это простая модель:

class Size(models.Model):
    size = models.CharField(max_length=10)

    def __str__(self):
        return self.size

Таким образом, отрисованный HTML представляет собой беспорядок:

<button type="button" class="size-btn">
    <label for="id_size_0">
        <input type="radio" name="size" value="2" id="id_size_0" required>S
    </label>
</button>

Как исправить кнопки так, чтобы они выбирались даже при нажатии не по центру, в размерном письме? Спасибо.

 <button
            type="button"
            id="button1"
            class="size-btn"
            onclick="checktheButton()"
        >
            <label for="id_size_0">
                <input
                    type="radio"
                    name="size"
                    value="2"
                    id="id_size_0"
                    required
                />S
            </label>
        </button>
        <script>
            const checktheButton = () => {
                document.querySelector("#id_size_0").check = true;
            };
        </script>