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

Под картинкой инпут радио, стилизация активности. Я скрыл инпут, под картинку, как сделать что бы при выборе ее появился border? Нужен сам стиль на css и что бы работала ИЕ7+ cheked работает с 9+. Может на jquery?

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

2 ответа 2

2

Для достижения эффекта нужно использовать + в правилах. например:

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

Можно и без > img, но тогда придется придумывать размеры и display для label, которые не совпадают с img...

Соответственно, чтоб работало в ie7, в jquery можно использовать этот селектор в обработчике изменения:

$(".ava_radio:not(:checked) + .ava_img > img").css("border","solid 1px white");
$(".ava_radio:checked + .ava_img > img").css("border","solid 1px #ededed");
5
  • 2
    Вот пример 21 авг 2012 в 15:50
  • Если уж все-равно используется jquery какой смысл заморачиваться с CSS3 селекторами?
    – iKuzko
    21 авг 2012 в 18:05
  • ну, например, когда появится желание похоронить старье, то этот костыль можно просто вынести в отдельный файл... и не подключать его. Это как раз тот случай когда css3 решение короче, как та самая сестра... 21 авг 2012 в 19:49
  • Что за "Обработчик изменений"? В ИЕ7 и в ИЕ8 код не работает. ЧТо может быть? Вставил код из второго примера
    – Hancock888
    22 авг 2012 в 6:49
  • не имею под рукой ie7,8 дебажить надо... сорри. 22 авг 2012 в 8:45
1
#radio_ava8:checked {
   border: 1px solid #ededeed;
}

UPD: А, стоп, вам же надо бордер задать не инпуту, а картинке? Тогда не подойдет. Что-то мне подсказывает, что средствами CSS тут не обойдетесь, нужен будет яваскрипт для манипуляции стилями. Хотя, возможно, кто-то подскажет замечательный вариант на CSS.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.