大家完成被点一下的按钮为鲜红色照片款式，即其它没选定的按钮为灰色照片款式，看下面照片款式：
1、最先我这里建立两个radio：（还可以多申明几个，这里的数据信息一切正常是动态性获得的）
<input type="radio" name="defaultAddress" class="address_manager_content-d3-left-img" /> <input type="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 : 15px 5px 0 0!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开展照片款式的切换，这是详细地址管理方法用到的1一部分，点一下返回应用Vue.js完成详细地址管理方法。
总结
以上所述是网编给大伙儿详细介绍的CSS 点一下radio完成两个照片款式切换而且好几个radio中只能有1个checked，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！
Copyright © 2002-2020 如何创建网站_免费网站建站_网站建设文章_网站建设7个基本流程_自动建站 版权所有 （网站地图） 粤ICP备10235580号