通过css实现单选按钮效果

刚刚入门（可能还没入门）的小前端，遇见两次实现单选按钮的效果，如下：

现在总结一下实现这两种样式的代码。

第一种：

	

	    

	        
		
	    
	    
借款人
	
	

	    

	        
		
	    
	    
投资人
	

.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中需要的图片。

第二种：

    

	

	    
	    
	
	
28-35岁
    
    

	

	    
	    
	
	
18-28岁
    

.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中用到的图片