自定義radio、checkbox的樣式

input標籤中的radio和checkbox是很表單中經常使用的類型，大多時候，默認樣式並不能知足咱們的需求，因此有了此篇。

自定義樣式，由此開啓：

html:

<div class="questionBlock3">
	<h6>2）請問你喜歡哪一種水果？</h6>
	<div class="answerRadioBox">
		<label><input name="Fruit" type="radio" value="" /><font>蘋果</font></label> 
		<label><input name="Fruit" type="radio" value="" /><font>蘋果2</font> </label> 
		<label><input name="Fruit" type="radio" value="" /><font>蘋果3</font></label> 
		<label><input name="Fruit" type="radio" value="" /><font>蘋果4</font></label> 
	</div>
</div>

<div class="questionBlock4">
	<h6>2）請問你喜歡哪些水果？</h6>
	<div class="answerCheckBox">
		<label><input name="demoCheck" type="checkbox" value="" /><font>蘋果 </font></label> 
		<label><input name="demoCheck" type="checkbox" value="" /><font>蘋果2 </font></label> 
		<label><input name="demoCheck" type="checkbox" value="" /><font>蘋果3 </font></label> 
		<label><input name="demoCheck" type="checkbox" value="" /><font>蘋果4 </font></label> 
		<label><input name="demoCheck" type="checkbox" value="" /><font>蘋果5</font></label> 
		<label><input name="demoCheck" type="checkbox" value="" /><font>蘋果6</font></label> 
	</div>
</div>

 

css:

.answerRadioBox,.answerCheckBox{
	width: 100%;
	height: auto;
	color: #fff;
	font-size: 0;
	padding:0.6rem 0 0.3rem 0;
	border-bottom: 1px solid #fff;
}

.answerRadioBox label,.answerCheckBox label{
	width: 25%;
	padding:0.2rem 0;
	font-size: 0.6rem;
	display: inline-block;
	position: relative;
}

.answerRadioBox label font,.answerCheckBox label font{
	padding-left: 0.8rem;
}

.answerRadioBox input[type="radio"] + font::before {
    content: "\a0"; /*不換行空格*/
    display: inline-block;
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
    border: 1px solid #c9c9c9;
    box-sizing: border-box;
}

.answerRadioBox input[type="radio"]:checked + font::before {
    background-color: #c9c9c9;
    background-clip: content-box;
    padding: 0.15em;
}

.answerRadioBox input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.answerCheckBox input[type='checkbox']{
    width: 0.56rem;
    height: 0.56rem;
    background: none;
    -webkit-appearance: none;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    outline: none;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.answerCheckBox input[type=checkbox]:checked::before{
   content: "\2713";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   color: #c9c9c9;
   font-weight: bold;
   text-align:center;
   font-size:0.8rem;
   line-height:0.5;
}

　　

效果圖以下：

 

　　

主要是用到了僞元素，能夠任意更換顏色，或者使用背景圖片也能夠。

「\2713」表示實體符號√，想了解更多能夠去 html css特殊字符表 查閱