CSS中点击radio如何实现两个图片样式切换并且多个radio中只能有一个checked
导读：本文共1118.5字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 我们实现被点击的按钮为红色图片样式，即其它没选中的按钮为灰色图片样式，看下面图片样式：1、首先我这里创建两个radio：（也可以多声明几个，这里的数据正常是动态获取的）<inputtype="radio"name="defaultAddress"class="address_manager_content-... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。我们实现被点击的按钮为红色图片样式，即其它没选中的按钮为灰色图片样式，看下面图片样式：
1、首先我这里创建两个radio：（也可以多声明几个，这里的数据正常是动态获取的）
<inputtype="radio"name="defaultAddress"class="address_manager_content-d3-left-img"/><inputtype="radio"name="defaultAddress"class="address_manager_content-d3-left-img"/>
2、为radio添加样式：CSS代码：
.address_manager_content-d3-left-img{/*隐藏原有样式*/appearance:none;-webkit-appearance:none;outline:none;/*增加新样式:未选中时*/display:inline-block;width:20px;height:20px;position:static;margin:15px5px00!important;background:url(/public/app/gzh/images/address_manager_wxz.png)no-repeat;background-size:cover;}.address_manager_content-d3-left-img:checked{/*选中时*/background:url(/public/app/gzh/images/address_manager_xz.png)no-repeat;background-size:cover;}3、说明：（有几个关键性的样式，其它的样式自行调整）
1）隐藏原有的样式 2）将原有的样式替换成图片使用的是url属性 3）关于！important的用法：我的这篇文章有说明 4）background-size：cover属性：把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。（和background-size：100% 100%有点类似） 5）选中元素：checked来设置选中后的样式。
4、经过上面的步骤就可以实现点击radio进行图片样式的切换，这是地址管理用到的一部分，点击回到使用Vue.js实现地址管理。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
CSS中点击radio如何实现两个图片样式切换并且多个radio中只能有一个checked的详细内容，希望对您有所帮助，信息来源于网络。