CSS组件之单选框（radio）样式

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十课 - CSS组件之单选框（radio）样式</title>
    <style>
        .checks {
            padding: 16px 0;
            font-size: 24px;
        }
        .checks > div {
            display: inline-block;
        }
        input[type='radio'] {
            opacity: 0;
            float: left;
            width: 4px;
        }
        input[type='radio'] + label {
            margin: 0;
            clear: none;
            padding: 5px 0 5px 28px;
            cursor: pointer;
            background: url(/u/image/off.png) left center no-repeat;
        }
        input[type='radio']:checked + label {
            background-image: url(/u/image/radio.png);
        }
    </style>
</head>
<body>
<div class="checks">
    <div>
        <input type="radio" name="sex"  id="radio1" checked>
        <label for="radio1">男性</label>
    </div>
    <div>
        <input type="radio" name="sex" id="radio2">
        <label for="radio2">女性</label>
    </div>
</div>
</div>
</body>
</html>