label要素の中にラジオボタンのinput要素を入れた場合のCSSデザイン

元のHTML

<label for="A" class="label"><input type="radio" name="btn" id="A">A</label>
<label for="B" class="label"><input type="radio" name="btn" id="B">B</label>
<label for="C" class="label"><input type="radio" name="btn" id="C">C</label>

初期状態ではデフォルトのボタンがそのまま実装されるので、ボタンを隠す必要がある。
display:noneではスクリーンリーダーで読み込めず使いづらくなるため、visually-hiddenを用いて非表示にしつつスクリーンリーダーを利用できるようにする。
そして、以下のサイトのvisually-hiddenクラスをinput要素に加える

参考:【サンプルコード紹介】チェックボックス/ラジオボタンをCSSで装飾する方法を解説。　KIOMIRU
https://kiomiru.co.jp/blog/coding/radio-checkbox/

次にこのようにCSSを加えて記述する

.label{
	position: relative;
    padding-left: 30px;//左側にボタンを表示するための余白を作る
    cursor: pointer;//カーソルをポインターにしてわかりやすくする
}

.label::before{ //ボタンの背景部分
	content:"";
	position:absolute;

	//適宜デザインに合うCSSを書く
	
}

.label:has(input:checked):after{//ラジオボタンの選択マーク
	content:"";
	position:absolute;

	//適宜デザインに合うCSSを書く

}

.label:has(input:checked)で選択されたラジオボタン（デフォルトでは青い丸がついているもの）を子に持つlabel要素を指定できる。
これのafter疑似要素を用いて選択時のマークを付ける。