用图像替换广播

-2

我想用图像替换我的单选按钮，如果没有jQuery ^^如果可能的话。因此，这里是我的小提琴，图像在小提琴文件显示：用图像替换广播

<input type="radio" class="btn1" value="" name="item" id="radio1"> 
<label class="label1" for="radio1"> <img src="IMAGE"> </label> 

.btn1{ 
    display: none; 
} 

.btn1:checked + label { 
    opacity: 1; 
}

https://jsfiddle.net/yxgvhL2j/

我想替换用猫图像的单选按钮。如果我点击catbutton（勾选），它应该显示狗图像： http://pix.iemoji.com/images/emoji/apple/ios-9/256/dog-face.png

我尝试了很多与显示块和没有，并将图像集成在CSS ......完全徒劳。

Pleaase帮帮忙！' - （

来源

2016-11-21 bobbi.w

[使用图片代替单选按钮]的可能的复制（http://stackoverflow.com/questions/17541614/use-image-instead-of-radio-button） –

尝试使用背景图片代替，这样你就可以在:checked伪类切换其他背景图片：

更新HTML：

<input type="radio" class="btn1" value="" name="item" id="radio1"> 
<label class="label1" for="radio1"></label>

更新的CSS：

.btn1{ 
    display: none; 
} 

.btn1 + label { 
    display: block; 
    width: 256px; 
    height: 256px; 
    background-image: url("http://www.fancyicons.com/free-icons/122/hallowen/png/256/black_cat_256.png"); 
} 

.btn1:checked + label { 
    background-image: url("http://pix.iemoji.com/images/emoji/apple/ios-9/256/dog-face.png"); 
}

工作演示：

https://jsfiddle.net/p30hm73v/

来源

2016-11-21 15:33:34

谢谢你，但遗憾的是它不起作用。我的CSS中的'+'不起作用，我注意到了，当我上周使用它时。 –

用图像替换广播

回答

相关问题