CSS模擬radio單選框check複選框

html:

<div class="radio-checkbox-wrap">
        <label>
            <input type="radio" name="sex"><i></i>first
        </label>

        <label>
            <input type="radio" name="sex"><i></i>second
        </label>

        <label>
            <input type="radio" name="sex"><i></i>other
        </label>
    </div>

css:

label{
            display: block;
            margin-bottom: 10px;
        }
        input{
            /*position: absolute; top: -9999px;*/
            display: none;opacity: 0;
        }
        i{
            display: inline-block;
            width: 17px; height: 17px;
            margin-right: 10px;
            background: url(radio_simulation.png) no-repeat;
            vertical-align: middle;
        }
        input:checked+i{
            background: url(radio_simulation_check.png) no-repeat;
        }

效果圖：