html
<div class="radio-box">
<input
class="radio_type"
@change="carTypeChange"
name="carType"
type="radio"
value="5s"
/>
</div>
css
.radio-box {
width: 10%;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 5px;
.radio_type {
width: 20px;
height: 20px;
border: none;
appearance: none;
position: relative;
outline: none;
}
.radio_type:before {
content: "";
width: 20px;
height: 20px;
border: 1px solid #e0251b;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:before {
content: "";
width: 20px;
height: 20px;
border: 1px solid #e0251b;
background: #e0251b;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:after {
content: "";
width: 10px;
height: 5px;
border: 2px solid white;
border-top: transparent;
border-right: transparent;
text-align: center;
display: block;
position: absolute;
top: 6px;
left: 5px;
vertical-align: middle;
transform: rotate(-45deg);
}
}