效果图
美化可根据自己需求进行修改，此处旨在传播方法
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS单/复选框美化</title>
<style>
.RadioStyle input{
display: none;
}
.RadioStyle label{
border: 1px solid #adadad;
padding: 2px 10px 2px 5px;
line-height: 28px;
min-width: 80px;
text-align: center;
float: left;
margin: 5px;
border-radius: 5px;
}
.RadioStyle input:checked+label{
color: white;
background: url("images/dxk.jpg") 400px 100px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
你最喜欢哪个季节（radio单选）<br>
<div class="RadioStyle">
<input type="radio" name="jj" id="jj1"><label for="jj1">春季</label>
<input type="radio" name="jj" id="jj2"><label for="jj2">夏季</label>
<input type="radio" name="jj" id="jj3"><label for="jj3">冬季</label>
<input type="radio" name="jj" id="jj4"><label for="jj4">秋季</label>
</div>
<div class="clear"></div>
你最喜欢吃哪些水果（checkbox多选）<br>
<div class="RadioStyle">
<input type="checkbox" name="sg" id="sg1"><label for="sg1">柚子</label>
<input type="checkbox" name="sg" id="sg2"><label for="sg2">橘子</label>
<input type="checkbox" name="sg" id="sg3"><label for="sg3">葡萄</label>
<input type="checkbox" name="sg" id="sg4"><label for="sg4">梨子</label>
<input type="checkbox" name="sg" id="sg5"><label for="sg5">香蕉</label>
<input type="checkbox" name="sg" id="sg6"><label for="sg6">苹果</label>
</div>
</body>
</html>