css3 寫checkbox 標籤單選框和實現類似於多選框的樣式改寫
阿新 • • 發佈:2019-01-02
實現單選框的效果:
<p class="login-p">
<span>
<input type="checkbox" class="checkbox" checked="checked"/>
<a href="javascript:;">我已閱讀並同意《xxx協議》</a>
</span>
</p>
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頁面:
<div class="bank-box">
<p class="choose-p">
<input type="checkbox" class="checkbox"/>
<span class="text-span"><img src="img/bank-02.png" class="bank-img"><em class="small-em firstfont">(尾號<em class="red-color">2120</em>儲蓄卡)</em></span>
</p>
<p class="clear code-p">
<span class="fl">驗證碼:</span>
<input type="text" class="fl code-input" placeholder="簡訊驗證碼" />
<span class="fr time-span">獲取驗證碼</span>
</p>
<p class="choose-p">
<input type="checkbox" class="checkbox"/>
<span class="text-span"><img src="img/bank-01.png" class="bank-img"><em class="small-em firstfont">(尾號<em class="red-color">2120</em>儲蓄卡)</em></span>
</p>
<p class="clear code-p">
<span class="fl">驗證碼:</span>
<input type="text" class="fl code-input" placeholder="簡訊驗證碼" />
<span class="fr time-span">獲取驗證碼</span>
</p>
</div><!--bank-box end-->
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 只可以選擇一個其中一個。