單選框，多選框樣式
主要註意before和after的樣式設置，input要設置id，label要設置for值並且等於相應的input值的id
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{font-size: 14px;color: #555555;font-family: "微軟雅黑";}
*{padding: 0px;margin: 0px;}
ul,li{list-style: none;}
a{text-decoration: none;}
input{margin-right:10px;}
.box{width: 100%;overflow: hidden;margin-bottom: 20px;}
/*單選框*/
.radio{width: 100px;float: left;margin-top: 20px;}
.radio>label{position: relative;margin-left: 50px;}
.radio>input{display: none;}
.radio>label:before{content:‘‘;width: 14px;height: 14px;border: 1px solid #cacaca;border-radius:50%;display: inline-block;position: absolute;left: -22px;top: 2px;}
.radio>input:checked + label:after{content:‘‘;width: 8px;height: 8px;display: inline-block;position: absolute;border-radius:50%;background: red;left: -18px;top: 5.5px;}
/*多選框*/
.checkbox{width:150px;float: left;margin-top: 20px;}
.checkbox>input{display: none;}
.checkbox>label{position: relative;margin-left: 50px;}
.checkbox>label:before{width: 14px;height: 14px;border-radius: 2px;display: inline-block;content: ‘‘;position: absolute;border: 1px solid #cacaca;left: -22px;top: 2px;}
.checkbox>input:checked +label:after{content:‘‘;width: 16px;height: 16px;display: inline-block;position: absolute;border-radius:50%;background: url(img/checbox.png)no-repeat center center;left: -21px;top: 1px;}
</style>
</head>
<body>
<div class="box">
<h2>單選框樣式操作，單選框選中操作</h2>
<div class="radio">
<input type="radio" id="r1" checked/><label for="r1">桃子</label>
</div>
<div class="radio">
<input type="radio" id="r2"/><label for="r2">蘋果</label>
</div>
<div class="radio">
<input type="radio" id="r3"/><label for="r3">西瓜</label>
</div>
</div>
<div class="box">
<h2>復選框樣式操作，復選框選中操作</h2>
<div class="checkbox">
<input type="checkbox" id="c1" checked/><label for="c1">我喜歡靳東</label>
</div>
<div class="checkbox">
<input type="checkbox" id="c2"/><label for="c2">我喜歡胡歌</label>
</div>
<div class="checkbox">
<input type="checkbox" id="c3"/><label for="c3">我喜歡劉愷威</label>
</div>
<!--<div class="checkbox all">
<input type="checkbox" id="c3"/><label for="c3">全選</label>
</div>
<div class="checkbox unSelect">
<input type="checkbox" id="c3"/><label for="c3">全不選</label>
</div>
<div class="checkbox Select">
<input type="checkbox" id="c3"/><label for="c3">獲得所選的全部值</label>
</div>-->
</div>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
</script>
</html>
單選框，多選框樣式