Apply css class to forms.RadioSelect widget

Question

I am using a ModelForm and trying to set a css class on a Django forms.RadioSelect widget like

class Meta:
    model = models.MyModel
    fields = ('rating',)
    widgets = {
      'rating': forms.RadioSelect(attrs={'class':'star'}),
    }

but class='star' does not get rendered in the html.

I also tried using:

def __init__(self, *args, **kwargs):
    super(MyModelForm, self).__init__(*args, **kwargs)
    self.fields['rating'].widget.attrs['class'] = 'star'

which also did not work. I tried the same thing with forms.Textarea widget and there I was able to get the css class rendered.

Am I doing anything wrong here or does RadioSelect just no support the class attribute (I want the class name applied to all radio inputs)?

score 8 · Accepted Answer · answered Jan 04 '13 at 16:42

The checkbox and radio widgets do not inherit from Input like the other widgets.

The class attribute does work for the RadioSelect, but it is applied to every radio input individually.

For example consider the following form:

from django import forms
class MyForm(forms.Form):
    my_field = forms.ChoiceField(widget=forms.RadioSelect(attrs={'class': 'star'}), choices=(('x', 'x'), ('y', 'y'),))

It will output the following html in the template:

<tr><th><label for="id_my_field_0">My field:</label></th>
  <td>
    <ul>
      <li><label for="id_my_field_0"><input value="x" type="radio" class="star" name="my_field" id="id_my_field_0" /> x</label></li>
      <li><label for="id_my_field_1"><input value="y" type="radio" class="star" name="my_field" id="id_my_field_1" /> y</label></li>
    </ul>
  </td>
</tr>

Note that the class is applied to each input element.

Ok, thanks for your answer. In the end I figured that once I removed a dependency to django-crispy-forms the RadioSelect was behaving like you explained. I should have mentioned that I was using django-crispy-forms in the first place. — mzu, Jan 07 '13 at 09:54

score -1 · Answer 2 · answered Mar 22 '13 at 13:08

-1

You could use this library: https://pypi.python.org/pypi/django-widget-tweaks

It allows you to do the following:

{% load widget_tweaks %}
<!-- add 2 extra css classes to field element -->
{{ form.title|add_class:"css_class_1 css_class_2" }}

answered Mar 22 '13 at 13:08

Eamonn Faherty

137
1
7

Apply css class to forms.RadioSelect widget

2 Answers2