Скрыть переключатели и просто показывать метки в форме django (выбор по радио)

#javascript #jquery #html #css #django

#javascript #jquery #HTML #css #django

Вопрос:

Я хочу удалить переключатели и просто показать метки «да» или «нет». Для этого я скрыл радиовход и использовал селектор css3 (: checked label), чтобы изменить цвет фона в соответствии с выбором. Но по какой-то причине это не работает.

HTML (из шаблона Django)

 <div class="questionnaire-radio">
    <label>
        <input class="selector" name="mdq_answer_1"   required="True" type="radio" value="y"> yes
    </label>
</div>
  

CSS

 .questionnaire-radio input[type=radio] {
  display: none;
  padding-top: 20px;
}

.questionnaire-radio input[type=radio]:checked   label {
  background-color:  #28c3ab;
  font-weight: bold;
  text-transform: uppercase;
}

.questionnaire-radio label {
  font-weight: normal;
  width: 100%;
  border: solid #28c3ab;
  border-radius: 100px;
  margin: 0;
  cursor: pointer;
}

.questionnaire-radio label:hover {
  font-weight: bold;
  text-transform: uppercase;
  background-color: #28c3ab;
  cursor: pointer;
}
  

Любая помощь будет высоко оценена. Я использую Chrome в качестве своего браузера. Я открыт для решений jQuery (при необходимости).

Ответ №1:

Чтобы использовать ввод [type= radio]:checked label так, как вы хотите, вещи должны быть отформатированы определенным образом. Ввод должен быть выше метки, к которой вы пытаетесь получить доступ

посмотрите, как это работает в этой скрипке

http://jsfiddle.net/QBM5/egv8K/1/

 <div class="questionnaire-radio">
<input id="aaa" class="selector" name="mdq_answer_1"   required="True" type="radio" value="y"  />
<label for="aaa">yes</label> 

<input id="bbb" class="selector" name="mdq_answer_1"   required="True" type="radio" value="n" />
<label for="bbb">no</label>
  

Я сделал некоторые предположения и добавил некоторую разметку, чтобы убедиться, что это сработало, но вы должны быть в состоянии заставить его работать, следуя этому примеру.

Комментарии:

1. Это работает в обычном html, но по какой-то причине не в django.

2. лол, два года спустя… Проверьте html после рендеринга и посмотрите, что отличается, такие платформы, как django, не должны влиять на поведение html css, поэтому, вероятно, он каким-то образом изменил html

3. Оказалось, что это ошибка PEBKAC, из-за которой в моем поле for была опечатка. Конечно, случай проверки несколько раз, прежде чем комментировать чье-то переполнение стека.