ラジオボタンとチェックボックス効果の純粋な CSS 実装例

<div class="reset-radio">
    <input チェック type="radio" id="age1" name="age">
    <span class="real-target"></span>
</div>

.リセットラジオ{
    表示: インラインブロック;
    位置: 相対的;
    幅: 16px;
    高さ: 16px;
}

.reset-radio .real-target {
    zインデックス: 1;
    幅: 100%;
    高さ: 100%;
    位置: 絶対;
    表示: インラインブロック;
    背景: #ffffff;
    境界線: 1px 実線 #dadde0;
    境界線の半径: 100%;
    上: 0;
    左: 0;
    下部: 0;
}

.reset-radio 入力[type=radio] {
    カーソル: ポインタ;
    zインデックス: 2;
    幅: 16px;
    高さ: 16px;
    不透明度: 0;
    位置: 絶対;
    左: 0;
    上: 0;
    マージン: 0;
    右: 0;
    下部: 0;
}

.reset-radio 入力:チェック済み+スパン {
    境界線の色: #48b4ec;
}

.reset-radio 入力:チェック済み+span::before {
    コンテンツ： '';
    位置: 絶対;
    背景: #48b4ec;
    幅: 6px;
    高さ: 6px;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
    境界線の半径: 100%;
}