最も簡単で明確な純粋なcss実装のラジオボックスradioチェックボックスcheckboxカスタムスタイル

先行効果図: demoダウンロードリンク:http://download.csdn.net/download/vlilyv/9942113htmlフレームワーク:最外層には位置決めを設定するための小包(div)が必要です.

<fieldset>
    <legend style="color: red;">      radiolegend>
    <div class="login_agree">
        <input type="radio" id="agree_btn">
        <label for="agree_btn"  class="input_agree" style="width: 36%;">  XXX  label>
    div>
fieldset>
<fieldset>
   <legend style="color: red;">      checkboxlegend>
   <div class="sex_checkbox">
     <input type="checkbox" checked="" id="sex_male" value="1" name="sex"><label for="sex_male"> label>
     <input type="checkbox" id="sex_female" value="0" name="sex"><label for="sex_female"> label>
   div>
fieldset>

style:

/*    ——    */
        label::before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #EEE;
            vertical-align: middle;
            -webkit-border-radius: 50%;
            margin-right: 10px;
            -webkit-box-sizing:border-box;
          -webkit-transition:background ease-in .5s
        }
        input[type="checkbox"]:checked+label::before{
            background-color: #6399ae;
            border: 2px #b3b3b3 solid;
        }
        /*      radio  */
        .login_agree {
            position: relative;
        }
        .login_agree input[type="radio"]{
            display: none;
        }
        .login_agree input[type="radio"]:checked+label::before{
            background-color: #f4d345;
            border: 4px #ccc solid;
        }
        /*      checkbox*/
        .sex_checkbox{
            position: relative;
        }
        .sex_checkbox input[type="checkbox"]{
            display: none;
        }

チェックボックスの男女の性別の選択はjqueryで両者の1つを制御します

/*      checkbox   js  ，        */
$('.sex_checkbox').find('input[type=checkbox]').bind('click', function(){
    $('.sex_checkbox').find('input[type=checkbox]').not(this).attr("checked", false);
});