单选框样式 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script  type="text/jscript" src="桌面/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

</script>
<style type="text/css">
.checkboxFour {
	width: 15px;
	height: 15px;
	
	float:left;
	border:1px solid #09F;
	margin: 2px 2px 2px 5px;
	
	border-radius: 100%;
	display:block;
}
.checkboxFour label {
	display:block;
	width: 11px;
	height: 11px;
	border-radius:100px;
	margin:2px 2px;
  
	cursor: pointer;
	
	background:#06F;
 
}

</style>
<script type="text/javascript">

</script>
</head>

<body>
<section>
  <!-- Checbox Four -->
  
  <div>
  	<div class="checkboxFour">
  		
	  	<label id="sex_box"></label>
  	</div><div style="float:left;margin: 2px 12px 2px 0px;">男</div>
    <div class="checkboxFour">
  		
	  
  	</div><div style="float:left;margin: 2px 12px 2px 0px;">女</div>
    </div>
</section>
</body>
</html>

 

posted on 2015-04-24 13:03  !无名之辈  阅读(175)  评论(0)    收藏  举报