how to add css class to radio button in django template

Question

I am trying to do the following with django widget tweaks:

{{ form.gender.0.tag|attr:"class:radio_1" }}

I get the error:

'SafeText' object has no attribute 'as_widget'

What am I doing wrong?

Answer 1

Initialize your RadioButton like this:

CHOICES=[('option1','option1'),
         ('option2','option2')]

radio = forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect(attrs={'class': 'radio_1'}))

and the generated HTML-Code will look like this:

<input type="radio" class="radio_1" ... />

Answer 2

You may have figured out already how to apply CSS to radio buttons in Django template but in case someone is in the same situation, here's a code straight from the docs:

<fieldset>
    <legend>{{ myform.beatles.label }}</legend>
    {% for radio in myform.beatles %}
    <div class="myradio">
        {{ radio }}
    </div>
    {% endfor %}
</fieldset>

This code assumes you have a form myform with a field beatles that uses a RadioSelect as its widget.

As you can see, looping through the field beatles can allow you to add necessary classes (here class="myradio") for each radio button; hence, make your CSS styling possible and easier.

In your case, you might want to also loop through your gender field and then apply the appropriate classes.