Question

我有那个HTML：

<span class="label-text"></span><ul id="id_stars">
<li><label for="id_stars_0"><input class="star-field" id="id_stars_0" name="stars" type="radio" value="1" /> 1</label></li>
<li><label for="id_stars_1"><input class="star-field" id="id_stars_1" name="stars" type="radio" value="2" /> 2</label></li>
<li><label for="id_stars_2"><input class="star-field" id="id_stars_2" name="stars" type="radio" value="3" /> 3</label></li>
<li><label for="id_stars_3"><input class="star-field" id="id_stars_3" name="stars" type="radio" value="4" /> 4</label></li>
<li><label for="id_stars_4"><input class="star-field" id="id_stars_4" name="stars" type="radio" value="5" /> 5</label></li>
</ul>

我有那个CSS：

#id_stars{
  list-style: none;
}

#id_stars label{
  font-weight: normal;
}

#id_stars input[type=radio]{
  display: none;
}

#id_stars label{
  width: 15px;
  height: 15px;
  margin: 0 0 0 5px;
  cursor: pointer;
  border: 0px;
  border-radius: 2px;
  background-color: #C1C1C1;
}

input[type=radio]:checked + label{
  background: #F79414;
}

当收音机字段被剔除时，标签的颜色不会改变。

有什么想法吗？

奖金问题：如何在标签附近定制自定义单选按钮而不触及HTML代码（由Django表单生成），而不是像现在一样修改标签？

Answer 1

它没有改变标签颜色，因为单选按钮位于标签内。你瞄准的CSS是兄弟姐妹。所以改变你的html：

<li>
  <input class="star-field" id="id_stars_0" name="stars" type="radio" value="1" />
  <label for="id_stars_0">1</label>
</li>

还要将#id_stars添加到

input[type=radio]:checked + label{
  background: #F79414;
}

#id_stars {
  list-style: none;
}
#id_stars label {
  font-weight: normal;
}
#id_stars input[type=radio] {
  display: none;
}
#id_stars label {
  width: 15px;
  height: 15px;
  margin: 0 0 0 5px;
  cursor: pointer;
  border: 0px;
  border-radius: 2px;
  background-color: #C1C1C1;
}
#id_stars input[type=radio]:checked + label {
  background: #F79414;
}

<span class="label-text"></span>

<ul id="id_stars">
  <li>
    <input class="star-field" id="id_stars_0" name="stars" type="radio" value="1" />
    <label for="id_stars_0">1</label>
  </li>
  <li>
    <input class="star-field" id="id_stars_1" name="stars" type="radio" value="2" />
    <label for="id_stars_1">2</label>
  </li>
  <li>
    <input class="star-field" id="id_stars_2" name="stars" type="radio" value="3" />
    <label for="id_stars_2">3</label>
  </li>
  <li>
    <input class="star-field" id="id_stars_3" name="stars" type="radio" value="4" />
    <label for="id_stars_3">4</label>
  </li>
  <li>
    <input class="star-field" id="id_stars_4" name="stars" type="radio" value="5" />
    <label for="id_stars_4">5</label>
  </li>
</ul>

Answer 2

正如可可所说，主要问题是单选按钮位于标签内。这是因为Django以这种方式渲染默认的RadioSelect小部件。

我发现解决方案的工作原理是为其中的无线电选择创建一个自定义渲染，以从标签中取出无线电输入。

就是这样：

class CustomRadioInputStar(RadioInput):
    def __unicode__(self):
        if 'id' in self.attrs:          
            label_for = ' for="%s"' % (self.attrs['id'])
        return mark_safe(u'%s<label%s class="rating-star"></label>' % (self.tag(), label_for))

class RadioStarCustomRenderer(forms.RadioSelect.renderer):
    def __iter__(self):
        for i, choice in enumerate(self.choices):
            yield CustomRadioInputStar(self.name, self.value, self.attrs.copy(), choice, i)

    def __getitem__(self, idx):
        choice = self.choices[idx]
        return CustomRadioInputStar(self.name, self.value, self.attrs.copy(), choice, idx)

    def render(self):
        return mark_safe(u'%s' % u'\n'.join([u'%s' % force_unicode(w) for w in self]))

然后，您只需将自定义渲染添加到RadioSelect小部件：

stars = forms.ChoiceField(choices=CHOICES_STARS, widget=forms.RadioSelect(renderer=RadioStarCustomRenderer))

当然，不要忘记导入相应的库：

from django.utils.safestring import mark_safe
from django.forms.widgets import RadioInput
from django.utils.encoding import force_unicode
from django.utils.html import conditional_escape

Django

2 个答案: