#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 была опечатка. Конечно, случай проверки несколько раз, прежде чем комментировать чье-то переполнение стека.