How i can achieve input checkbox or radio button like this? - checkbox

Question

i want to achieve radio button or check box like this:
it was on a website here
in above link if you choose Cheese Pizza Add > Medium > there you can find input buttons i am looking for.
My code:
<div class="boxes_area">
<div class="main_content">
Extra Cheese
</div>
<div class="right_side">
<div class="right_half_icon_one">
</div>
</div>
<div class="left_side">
<div class="left_half_icon_one">
</div>
</div>
<div class="full_side">
<div class="full_circle">
</div>
</div>
</div>
With css i achieved:
.right_side {
border: 1px solid;
border-radius: 50%;
padding: 5px;
}
.modal .modal-header {
border-bottom: 1px solid;
}
.modal .modal-footer {
border-top: 1px solid;
}
.right_half_icon_one img {
width: 35px;
}
.left_half_icon_one img {
width: 35px;
}
.boxes_area {
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.full_circle img {
width: 35px;
}
.right_half_icon_one {
width: 35px;
height: 35px;
background: #212a5e;
border-radius: 100%;
position: relative;
}
.right_half_icon_one::before{
position: absolute;
top: -1px;
content: '';
left: 18px;
width: 18px;
height: 37px;
background: white;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.left_side {
border: 1px solid;
padding: 5px;
border-radius: 100%;
}
.left_half_icon_one {
width: 35px;
height: 35px;
background: #212a5e;
border-radius: 100%;
position: relative;
}
.left_half_icon_one::before{
position: absolute;
top: -1px;
content: '';
right: 18px;
width: 18px;
height: 37px;
background: white;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.full_side {
border: 1px solid;
padding: 5px;
border-radius: 100%;
}
.full_circle {
width: 35px;
height: 35px;
background: #212a5e;
border-radius: 50%;
}
but i want those with input and radio box form elements.