Images - Radiobuttons

Я хочу использовать изображения в качестве радиоблоков. Все в порядке в Chrome и Firefox. Но в IE это не работает ... Test URL: https://webshop.haco.com/calculator1/Images - Radiobuttons

CSS и HTML:

label > input{ /* HIDE RADIO */ 
    display:none; 

} 
label > input + img{ /* IMAGE STYLES */ 
    cursor:pointer; 
    border:2px solid transparent; 

} 

<label> 
<input type="radio" name="shape" value="round" checked /> 
<img id="roundShape" src="css/images/round.jpg"> 
</label>

источник

2015-03-31 user1756365

Это действительно работает, но флажки находятся в нижнем левом углу каждого изображения. отключить отображение: нет стиля метки> input, чтобы увидеть это поведение –

@FrankProvost Я не вижу флажки ??? И дисплей: нет в моем CSS? label> input {/ * HIDE RADIO */ дисплей: нет; } – user1756365

У меня была та же проблема. Проверьте это: http://stackoverflow.com/questions/13613933/styling-radio-button-not-work-in-ie-and-firefox –

Я изменил CSS к следующему, и она работала в IE

label { 
    position: relative; 
} 

label > input{ /* HIDE RADIO */ 
    display: block; 
    opacity: 0; 
    position: absolute; 
    left: 0; right: 0; top: 0; 
    margin: 0 auto; 
    width: 100%; height: 100%; 
} 

label > input + img{ /* IMAGE STYLES */ 
    cursor:pointer; 
    border:2px solid transparent; 

}

не забывайте об относительном положении метки.

может быть не самое приятное решение, но работает хорошо.

источник

2015-03-31 12:23:06

Images - Radiobuttons

ответ

Смежные вопросы