纯HTML+CSS实战之单/复选框美化

效果图
纯HTML+CSS实战之单/复选框美化
美化可根据自己需求进行修改，此处旨在传播方法
代码如下：
<!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>