ラジオボタンをdiv要素で作ったようなデザインに変更する方法

上記画像は、divタグを使用することで作成しました。これと同様のデザインのものをラジオボタンにて実装したいと考えています。また、選択時にはborderで囲われて選択されているものがわかるようにしたいと考えています。
調べたところlabelを使用するなどの情報が出てきたのですが、初心者のため理解することができませんでした。

どなたかわかる方いましたらご教授いただけますと幸いです。
何卒よろしくお願いいたします。

以下、画像のコードになります。

html
1<div class="chooes_color pink"></div>

css
1.chooes_color{
2	width: 110px;
3	height: 110px;
4	border-radius: 50%;
5	float: left;
6	transition-duration: 0.45s;
7	border: 3px solid #ffffff;
8}
9.pink{
10	background-color: #F88CBA;
11}

m.ts10806

2021/01/06 05:14 編集

input-type=radioとlabelを使います。CSSもJavaScriptも組み合わせることもあります。何を見たのかは知らないですが、調べて出てきた情報以上のことは殆ど出てこないと思います（確率の低い掛けです）。理解するしかありません。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

同様のデザインのものをラジオボタンにて実装したいと考えています。また、選択時にはborderで囲われて選択されているものがわかるようにしたい

:checked 疑似クラスを使えばいいと思います。

サンプル

css
1.chooes_color{
2    appearance: none; /* 追加 */
3    width: 110px;
4    height: 110px;
5    border-radius: 50%;
6    float: left;
7    transition-duration: 0.45s;
8    border: 3px solid #ffffff;
9}
10.pink{
11    background-color: #F88CBA;
12}
13
14 /* 追加 */
15.chooes_color:checked{
16    border: 3px solid #000;
17}