[英]I have an icon next to a label and when you click the icon, it should not click the label/radio button that the label is attached to
[英]How can I highlight a label when click in a radio button?
当我点击它时,我想要突出显示单选按钮的标签,我找到答案但不起作用。 这是我的代码:
HTML
<div class="same-line">
<input type="checkbox" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" value="Sí" class="checkbox">
<label class="checkbox">
Jornadas de género (sin fecha confirmada)</label>
<div class="clear-form"></div>
</div>
<div class="same-line">
<input type="checkbox" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" value="Sí" class="checkbox">
<label class="checkbox">
Curso de fotografía (sin fecha confirmada)</label>
<div class="clear-form"></div>
</div>
CSS
.same-line input[type='radio'] {
display:none;
}
.same-line label[class='checkbox'] {
display:inline-block;
font-size: 12.2pt;
}
.same-line input[type='radio']:checked + label[class='checkbox'] {
background-color: #FFBF00 !important;
}
任何想法?
input[type="radio"]:checked+label{ background-color: #FFFF00; }
HTML:
(我已经添加了id
上的复选框的属性,以及for
在标签属性)
<div class="same-line">
<input type="checkbox" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" id="cb1" value="Sí" class="checkbox">
<label class="checkbox" for="cb1">
Jornadas de género (sin fecha confirmada)</label>
<div class="clear-form"></div>
</div>
<div class="same-line">
<input type="checkbox" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" id="cb2" value="Sí" class="checkbox">
<label class="checkbox" for="cb2">
Curso de fotografía (sin fecha confirmada)</label>
<div class="clear-form"></div>
</div>
CSS:
(我已将“收音机”改为“复选框”)
.same-line input[type='checkbox'] {
display:none;
}
.same-line label.checkbox {
display:inline-block;
font-size: 12.2pt;
}
.same-line input[type='checkbox']:checked + label.checkbox {
background-color: #FFBF00;
}
现场演示: http : //jsfiddle.net/PUcmA/1/
HTML :
<div class="same-line">
<input type="checkbox" id="checkbox1" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" value="Sí" class="checkbox">
<label for="checkbox1">
Jornadas de género (sin fecha confirmada)</label>
<div class="clear-form"></div>
</div>
<div class="same-line">
<input type="checkbox" id="checkbox2" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" value="Sí" class="checkbox">
<label for="checkbox2">
Curso de fotografía (sin fecha confirmada)</label>
<div class="clear-form"></div>
</div>
CSS :
.same-line input[type='checkbox'] {
display:none;
}
.same-line label {
display:inline-block;
font-size: 12.2pt;
background-color:#fff;
}
.same-line input[type='checkbox']:checked + label {
background-color: #ddd;
}
jsFiddle: http : //jsfiddle.net/heZBT/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.