CSS3 を使用して入力複数選択ボックスのスタイルをカスタマイズする例

 <div class="radio">
    <input type="checkbox" id="sex1">
    <label for="sex1"></label>
    男
<div class="radio">
    <input type="checkbox" id="sex2">
    <label for="sex2"></label> 女性</div>

.ラジオ{
    位置: 相対的;
    表示: インラインブロック;
    右マージン: 12px;
}

.ラジオ入力{
    幅: 15px;
    高さ: 15px;
    appearance: none;/*デフォルトのスタイルをクリア*/
    -webkit-appearance: なし;
    不透明度: 0;
    アウトライン: なし;
    z-index: 8; /*入力レベルをラベルより高くして選択できるようにします*/
    
}

.ラジオラベル{
    位置: 絶対;
    左: 0;
    上: 6px;
    幅: 15px;
    高さ: 15px;
    境界線: 1px 実線 #3582E9;
}

.radio 入力:チェック済み+ラベル::after {
    コンテンツ： "";
    位置: 絶対;
    左: 4px;
    上: 0px;
    /* ここでは長方形の半分が表示され、チェックマーク スタイルを実現するために 45 度回転されます */
    幅: 5px;
    高さ: 12px;
    右境界線: 1px 実線 #000000;
    下境界線: 1px 実線 #000000;
    変換: 回転(45度);
}