ラジオボタンとチェックボックスをカスタマイズする

<div class="sample">
    <div>
        <input type="radio" name="radio-sample" id="radio1"><label for="radio1">ラジオボタン１</label>
        <input type="radio" name="radio-sample" id="radio2"><label for="radio2">ラジオボタン２</label>
    </div>
    <div>
        <input type="checkbox" name="check-sample" id="check1"><label for="check1">チェックボックス１</label>
        <input type="checkbox" name="check-sample" id="check2"><label for="check2">チェックボックス２</label>
    </div>
</div>

.sample {
    /* inputを包むボックスの調整（0から調整するといい） */
    padding: 6px;
}

/* CSS3が対応してない場合は適応される（デフォルトのボタン） */
.sample input[type=radio],
.sample input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
}

/* 隣接しているlabel要素に対して適応される */
.sample input[type=radio] + label,
.sample input[type=checkbox] + label {
    /* labelにポジションをあわせる */
    position: relative;
    display: inline-block;
    /* 0から調整するといいかも */
    margin-right: 12px;
    /* label内の文字の大きさ */
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
}


/* CSS3に対応していないブラウザには適応されない（通常のボタンが表示される） */
@media (min-width: 1px) {
    /* デフォルトのボタンを無くす */
    .sample input[type=radio],
    .sample input[type=checkbox] {
        display: none;
        margin: 0;
    }

    /* カスタマイズしているボタン位置をabsoluteしている為、
        ボタンと文字列が被るので、文字列の位置を調整する */
    .sample input[type=radio] + label,
    .sample input[type=checkbox] + label {
        padding: 0 0 0 24px;
    }

    /* ラジオボタンとチェックボックスの共通の位置と形状を設定 */
    .sample input[type=radio] + label::before,
    .sample input[type=checkbox] + label::before {
        content: "";
        /* labelを基準値に絶対位置を指定する */
        position: absolute;
        /* 高さを真ん中にあわせる */
        top: 50%;
        /* 左詰めにする */
        left: 0;
        margin-top: -9px;

        /* ボタンの形状を指定する */
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 18px;
        height: 18px;
        background: #FFF;
    }

    /* ラジオボタンの形状 */
    .sample input[type=radio] + label::before {
        border: 2px solid #000;
        border-radius: 30px;
    }

    /* チェックボックスの形状 */
    .sample input[type=checkbox] + label::before {
        border: 2px solid #ccc;
    }


    /* チェック時の位置を設定する */
    .sample input[type=radio]:checked + label::after,
    .sample input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;

        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }

    /* ラジオボタンのチェック時の位置と形状を設定する */
    .sample input[type=radio]:checked + label::after {
        left: 5px;

        width: 8px;
        height: 8px;
        margin-top: -4px;

        background: #E71063;
        border-radius: 8px;
    }

    /* チェックボックスのチェック時の位置と形状を設定する */
    .sample input[type=checkbox]:checked + label::after {
        /* チェックの位置 */
        left: 3px;
        margin-top: -8px;

        /* チェックの大きさ */
        width: 16px;
        height: 8px;

        /* 形状 */
            /* heightの部分 */
        border-left: 3px solid #E71063;
            /* widthの部分 */
        border-bottom: 3px solid #E71063;

        /* 回転（角度をつける） */
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

.sample {
    /* inputを包むボックスの調整（0から調整するといい） */
    padding: 6px;
    input[type=radio],input[type=checkbox] {
        display: inline-block;
        margin-right: 6px;
    }
    input[type=radio] + label,input[type=checkbox] + label {
        position: relative;
        display: inline-block;
        margin-right: 12px;
        font-size: 14px;
        line-height: 30px;
        cursor: pointer;
    }
}

@media (min-width: 1px) {
    .sample{
        input[type=radio],input[type=checkbox] {
            display: none;
            margin: 0;
        }
        input[type=radio] + label,input[type=checkbox] + label {
            padding: 0 0 0 24px;
        }
        input[type=radio] + label::before,input[type=checkbox] + label::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            width: 18px;
            height: 18px;
            margin-top: -9px;
            background: #FFF;
        }
        input[type=radio] + label::before {
            border: 2px solid #ccc;
            border-radius: 30px;
        }
        input[type=checkbox] + label::before {
            border: 2px solid #ccc;
        }
        input[type=radio]:checked + label::after,input[type=checkbox]:checked + label::after {
            content: "";
            position: absolute;
            top: 50%;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
        }
        input[type=radio]:checked + label::after {
            left: 5px;
            width: 8px;
            height: 8px;
            margin-top: -4px;
            background: #E71063;
            border-radius: 8px;
        }
        input[type=checkbox]:checked + label::after {
            left: 3px;
            width: 16px;
            height: 8px;
            margin-top: -8px;
            border-left: 3px solid #E71063;
            border-bottom: 3px solid #E71063;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    }
}

※もし、画像で対応するならこっち

@mixin custom-input($size, $type) {
    // 見た目は画像を表示するので、input要素は非表示にする
    display: none;
    // 隣接セレクタを使い、inputの次にあるlabelに見た目を設定する
    + label {
        position: relative;
        display: inline-block;
        // 【任意】カスタマイズした要素と文字間隔を空ける。
        padding-left: $size + 5px;
        min-height: $size;
        line-height: $size;
        cursor: pointer;
        &::before {
            position: absolute;
            left: 0;
            top: 0;
            display: inline-block;
            width: $size;
            height: $size;
            // contentに表示したい画像を指定
            content: url("#{$type}_off.png");
        }
    }
    // :checkedの擬似クラスでinput要素のチェック状態を取得。labelは接続セレクタを使い、チェック状態用の画像を指定する
    &:checked + label::before {
        content: url("#{$type}_on.png");
    }
    // 【任意】input要素をdisabledにする事がある場合は、disabled用のスタイルを指定
    &:disabled + label {
        opacity: .3;
        cursor: not-allowed;
    }
}

// チェックボックスのカスタマイズ
// 第1引数に画像サイズ、第2引数に画像名を指定
.custom-checkbox {
    @include custom-input(20px, checkbox);
}

// ラジオボタンのカスタマイズ
.custom-radio {
    @include custom-input(18px, radio);
}

// チェックボックスのカスタマイズ
.custom-checkbox {
    display: none;
}
.custom-checkbox + label {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    padding-left: 25px;
    min-height: 20px;
    line-height: 20px;
    cursor: pointer;
}
.custom-checkbox + label::before {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: url("checkbox_off.png");
}
.custom-checkbox:checked + label::before {
    content: url("checkbox_on.png");
}
.custom-checkbox:disabled + label {
    opacity: .3;
    cursor: not-allowed;
}
// ラジオボタンのカスタマイズ
.custom-radio {
    display: none;
}
.custom-radio + label {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    padding-left: 23px;
    min-height: 18px;
    line-height: 18px;
    cursor: pointer;
}
.custom-radio + label::before {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    content: url("radio_off.png");
}
.custom-radio:checked + label::before {
    content: url("radio_on.png");
}
.custom-radio:disabled + label {
    opacity: .3;
    cursor: not-allowed;
}