How do I use :checked on radio buttons

1 Views

How do I use the :checked css for my radio buttons with hidden input buttons?
http://cormilu.com.br/loja/sem-categoria/test-2/

I’ve tried:

Read More
input[type=”radio”]:checked{ color:red; … }
input[type="radio"]:checked+label{ color:red; …  } 
label > input + img{ color:red; … }
label > input:checked + img{color:red; … }

Is it because of my page setup? Ihid the input radio buttons and replaced them with images.

Thanks for your help.
Cheers,
Amir

Post Views: 1

Related posts

1 comment

  1. The problem is that you can’t target the image or the label which you had replaced the radio button with.

    You can either:

    1) Use JavaScript to change things (targeting parentNode) upon radio button click/change

    2) Change the HTML markup if it is able to solve your problem, and apply CSS:

    Move the <img> tag after the <input> and use the CSS sibling selector (+):

    HTML:

    <label class="hideradio-vars">
    <input type="radio" value="20-bolas-fio-de-3m" id="pa_kit" name="attribute_pa_kit">
    <img src="http://cormilu.com.br/cormilu-content/uploads/2015/04/free1.png">
    &nbsp; &nbsp; 20 Bolas Fio de 3m
</label>

    CSS:

    .hideradio-vars input[type="radio"]:checked + img {
    /* Your rules here */
}

    Unfortunately you cannot target the parent with CSS, so you might want to look into JS/jQuery or to revise your HTML markup entirely.

Comments are closed.