圖像 - Radiobuttons

我想使用圖像作爲單選按鈕。在Chrome和Firefox中一切正常。但在IE中這是行不通的...... 測試網址：https://webshop.haco.com/calculator1/圖像 - 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

它實際上正在工作，但複選框位於每個圖像的左下角。禁用顯示：無樣式的標籤>輸入查看此行爲 – 2015-03-31 12:11:24

@FrankProvost我沒有看到複選框？顯示：沒有在我的CSS？標籤>輸入{/ * HIDE RADIO */ display：none; } – user1756365 2015-03-31 12:13:19

我有同樣的問題。看看這個：http://stackoverflow.com/questions/13613933/styling-radio-button-not-work-in-ie-and-firefox – 2015-03-31 12:17:55

我改變了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

圖像 - Radiobuttons

回答

相關問題