前端开发CSS美化单选框

<style type=”text/css” media=”all”>

    .radio-box {

        display: inline-block;

        margin-right: 10px;

    }

    .radio-box input {

        display: none;

    }

    .radio-box label {

        position: relative;

        display: inline-block;

        width: 14px;

        height: 14px;

        top: 0;

        left: 0;

        vertical-align: middle;

        border: solid 1px #535554;

        border-radius: 50%;

        cursor: pointer;

    }

    .radio-box input:checked + label {

        border: solid 1px #1fc0f0;

    }

    .radio-box input:checked + label:after {

        content: ”;

        width: 10px;

        height: 10px;

        position: absolute;

        top: 50%;

        left: 50%;

        margin-top: -5px;

        margin-left: -5px;

        background: #00b7ee;

        border-radius: 50%;

    }

    .check-box em {

        margin: 0 0 0 5px;

    }

</style>

<span class=”radio-box”>

    <input type=”radio” id=”xb” name=”radio” /> <label for=”xb”></label>

    <em>旬&nbsp;报</em>

</span>

<span class=”radio-box”>

    <input type=”radio” id=”cbzb” name=”radio” /> <label for=”cbzb”></label>

    <em>春播专报</em>

</span>

<span class=”radio-box”>

    <input type=”radio” id=”qsqz” name=”radio” /> <label for=”qsqz”></label>

    <em>秋收秋种</em>

</span>