全国服务热线:4008-888-888

技术知识

CSS 点一下radio完成两个照片款式切换而且好几个

大家完成被点一下的按钮为鲜红色照片款式,即其它没选定的按钮为灰色照片款式,看下面照片款式:

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,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服