Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I highlight a label when click in a radio button?

Tags:

html

css

I want to highlight the label of a radio button when a I click in it, I find an answer but don't work. Here my code:

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;
}

Any idea?

like image 319
Ivanhercaz Avatar asked Sep 21 '25 09:09

Ivanhercaz


2 Answers

http://jsfiddle.net/hekh8/

input[type="radio"]:checked+label{ background-color: #FFFF00; } ​
like image 66
Jaspero Avatar answered Sep 23 '25 00:09

Jaspero


HTML:

(I've added id attributes on the check-boxes, and for attributes on the labels)

<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:

(I've changed "radio" to "checkbox")

.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;
}

Live demo: http://jsfiddle.net/PUcmA/1/

like image 39
Šime Vidas Avatar answered Sep 22 '25 23:09

Šime Vidas



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!