パーツ番号 04-07-02 ・ CSSのみ

丸型ラジオボタン(未/済)

未選択と選択済みの状態を並置した丸型ラジオボタン。料金プランや配送方法などの単一選択項目に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-07-02-row">
          <span class="d04-07-02-circle"></span>
          <span class="d04-07-02-circle checked"></span>
        </div>

CSS

.d04-07-02-row{display:flex;gap:20px;align-items:center}
        .d04-07-02-circle{width:34px;height:34px;border-radius:50%;border:2px solid #94a3b8;background:#fff;position:relative;display:inline-block}
        .d04-07-02-circle.checked{border-color:#059669}
        .d04-07-02-circle.checked::after{content:"";position:absolute;left:8px;top:8px;width:14px;height:14px;border-radius:50%;background:#059669}

クラス名 .d04-07-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。