css3 写checkbox 标签单选框和实现类似于多选框的样式改写

实现单选框的效果:

"login-p"> "checkbox" class="checkbox" checked="checked"/> "javascript:;">我已阅读并同意《xxx协议》

css代码: .form-box .login-p{ margin: 1rem 0rem 1rem 0rem; } .form-box .login-p a{ color: #555; font-size: 1.4rem; } .form-box .checkbox{ -webkit-appearance: none; appearance: none; width: 1.3rem; height: 1.3rem; margin: 0; cursor: pointer; vertical-align: bottom; background: #E80000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; top: -0.2rem; } input[type=checkbox]:checked::after { content: url(../img/right.png) ; display: block; position: absolute; left: 0.1rem; top: -.2rem; } 运行结果如下: ![这里写图片描述](http://img.blog.csdn.net/20160906091750452) 要用到的图片: ![这是用到的rght.png图片](http://img.blog.csdn.net/20160906091934562)。 以上是单选框的写法。下面是用checkbox实现类似radio的标签功能. html页面:
"bank-box">

"choose-p"> "checkbox" class="checkbox"/> "text-span">"img/bank-02.png" class="bank-img">"small-em firstfont">(尾号"red-color">2120储蓄卡)

"clear code-p"> "fl">验证码: "text" class="fl code-input" placeholder="短信验证码" /> "fr time-span">获取验证码

"choose-p"> "checkbox" class="checkbox"/> "text-span">"img/bank-01.png" class="bank-img">"small-em firstfont">(尾号"red-color">2120储蓄卡)

"clear code-p"> "fl">验证码: "text" class="fl code-input" placeholder="短信验证码" /> "fr time-span">获取验证码

css样式代码 .choose-p{ height: 4.5rem; font-size: 1.6rem; line-height: 4.5rem; background: white; padding-left: 1rem; color: #333; border-bottom: 1px solid #D1D1D1; } .choose-p .small-em{ color: #999; font-size: 1.4rem; } .form-box .checkbox{ -webkit-appearance: none; appearance: none; width: 1.5rem; height: 1.5rem; margin: 0; cursor: pointer; vertical-align: middle; border: 1px solid #D1D1D1; border-radius: .2rem; background: white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; top: -0.2rem; } .form-box .text-span{ margin-right: -.5rem; } input[type=checkbox]:checked::after { content: url(../img/right1.png) ; display: block; position: absolute; } html静态页面: ![这里写图片描述](http://img.blog.csdn.net/20160908151145040) ![这里写图片描述](http://img.blog.csdn.net/20160908151159547) js代码 $(".checkbox").click(function(){ $(".code-p").hide(); $(this).parent().siblings().find(".checkbox").attr("checked",false); $(this).parent().find(".checkbox").attr("checked",true); if($(this).is(":checked")){ $(this).parent().next(".code-p").show().find(".time-span").click(function(){ oSendBtn = $(this); oSendCodeNum = 60; oTime = 60; sendCodeTime(); }); }else{ $(this).parent().next(".code-p").hide(); } }); 多个checkbox 只可以选择一个其中一个。

你可能感兴趣的:(css3 写checkbox 标签单选框和实现类似于多选框的样式改写)