以前做自定义样式的radio, checkbox 的时候,一直是如下结构
然后定义diyRadio 的样式作为新Radio, 再用js 做关联。
知道今天才知道可以用标签的for 属性 + :checked 做,纯CSS
( 真是太不应该了,学东西还是要认真、细致点。 )
一个功能完善、展示信息丰富的电子商店销售平台;针对企业与个人的网上销售系统;开放式远程商店管理;完善的订单管理、销售统计、结算系统;强力搜索引擎支持;提供网上多种在线支付方式解决方案;强大的技术应用能力和网络安全系统,同时拥有灵活多变的商品管理、新闻管理等功能,功能强劲的后台管理界面,它为您提供了多款专业美观的店面样式、俱备完整的购物网站功能、结构简单、容易使用、并设有促销广告和店标自定义功能,操
DIY 单选项示例如下:
radio2 radio3
/* CSS */
.radio-beauty-container {
font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
padding: 2px;
background-color: green;
background-clip: content-box;
}
.radio-beauty-container .radio-name {
vertical-align: middle;
font-size: 16px;
}
.radio-beauty-container .radio-beauty {
width: 18px;
height: 18px;
box-sizing: border-box;
display: inline-block;
border: 1px solid green;
vertical-align: middle;
margin: 0 15px 0 3px;
border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
box-shadow: 0 0 7px green;
}









