<input id="radio_ava8" class="ava_radio" name="1 " type="radio" value="1" /> <label class="ava_img" for="radio_ava8"> <img src="/i/ava8.gif" width="100" height="100" /> </label> .ava_radio {display: none;}

Under the picture is an input radio, styling activity. I hid the input, under the picture, how to make a border appear when choosing it? The style itself is needed on css and that IE7 + cheked would work. Cheked works with 9+. Maybe on jquery?

 ???? { border: 1px solid #ededeed; }

    2 answers 2

    To achieve the effect you need to use + in the rules. eg:

     .ava_radio:checked + .ava_img > img { border:solid 1px #ededed; }

    You can and without > img , but then you have to come up with the size and display for the label , which do not coincide with img ...

    Accordingly, in order to work in ie7, in jquery you can use this selector in the change handler:

     $(".ava_radio:not(:checked) + .ava_img > img").css("border","solid 1px white"); $(".ava_radio:checked + .ava_img > img").css("border","solid 1px #ededed");
    • 2
      Here is an example - Yura Ivanov
    • If jquery is used anyway, what's the point of bothering with CSS3 selectors? - iKuzko
    • Well, for example, when there is a desire to bury the old stuff, then this crutch can be simply transferred to a separate file ... and not connected. This is exactly the case when the css3 solution is shorter, like that sister ... - Yura Ivanov
    • What is the "change handler"? In IE7 and IE8 code does not work. What could be? Inserted the code from the second example - Hancock888
    • I do not have at hand ie7.8 need to debug ... sorry. - Yura Ivanov
     #radio_ava8:checked { border: 1px solid #ededeed; }

    UPD: Oh, stop, you need to set a border not an input, but a picture? Then it will not work. Something tells me that the CSS tools will not do here, you will need javascript for style manipulation. Although, perhaps, someone will tell a great option on CSS.