剛剛入門（可能還沒入門）的小前端，遇見兩次實現單選按鈕的效果，如下：

現在總結一下實現這兩種樣式的程式碼。

第一種：

<form action="#">
	<div class=" info ">
	    <div class="radiobox ">
	        <input type="radio" id="person1" checked="checked" name="userType" />
		<span></span>
	    </div>
	    <p class="text">借款人</p>
	</div>
	<div class=" info">
	    <div class="radiobox">
	        <input type="radio" id="person2" name="userType" />
		<span></span>
	    </div>
	    <p class="text">投資人</p>
	</div>

</form>					

.radiobox{ display: inline-block; position: relative; top: 46px; width: 13px; height: 13px; background: url(../img/chooseBtn.png) no-repeat;}
/* 單選框 */
.radiobox input{ opacity: 0; position: relative; top: -3px; left: 0; width: 100%; height: 100%; z-index: 100;}
.radiobox span{ /*display: block;*/ width: 7px; height: 7px; border-radius: 100%; position: absolute; background: #f24b41; top: 50%; left: 50%; margin: -4px 0 0 -3px; z-index: 1;} 
.radiobox input[type="radio"] + span{ opacity: 0;}/* 這一行和下一行形成單選的效果 */
.radiobox input[type="radio"]:checked+span{ opacity: 1;}
.text{ position: relative; top: -25px; left: 5px; height: 14px; margin-left: 32px; padding-top: 46px; padding-bottom: 12px;  color: #816b6b; font-size: 14px;}
 

這個是css中需要的圖片。

第二種：

<form action="#">
    <div class="info">
	<div class="radiobox">
	    <input type="radio" id="quest01-chose01" checked="checked" name="quest01" />
	    <span></span>
	</div>
	<p>28-35歲</p>
    </div>
    <div class="info">
	<div class="radiobox">
	    <input type="radio" id="quest01-chose02" name="quest01" />
	    <span></span>
	</div>
	<p>18-28歲</p>
    </div>
 

</form>

.info {
	line-height: 36px;
}
.radiobox {
	position: relative;
	top: 9px;
	float: left;
	width: 16px;
	height: 16px;
	border-radius: 100%;
}
.radiobox input {
	position: relative;
	top: -7px;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	opacity: 0;
}
.radiobox span {
	position: absolute;
	top: 0;
	width: 15px;
	height: 15px;	
	border: 1px solid #666;
	background: url(../img/radiobg02.png);
	z-index: 1;
	border-radius: 100%;
}

.radiobox input[type="radio"]:checked + span {
	border-color: #ffbc03;
	background: url(../img/radiobg.png);
}
.info p {
	width: 565px;
	line-height: 36px;
	margin-left: 28px;
	color: #666;
	font-size: 14px;
}

css中用到的圖片