پیشنمایش زنده
کد HTML
<div class="radio-container mt-2">
<div>
<input
checked=""
class="text-xl"
name="status"
id="unconfirmed"
type="radio"
/>
<label for="unconfirmed">
<div class="custom-radio"></div>
<span class="">Try</span>
</label>
</div>
<div>
<input name="status" id="repair" type="radio" />
<label for="repair">
<div class="custom-radio"></div>
<span>This</span>
</label>
</div>
<div>
<input name="status" id="replacement" type="radio" />
<label for="replacement">
<div class="custom-radio"></div>
<span>One</span>
</label>
</div>
</div>
کد CSS
.radio-container {
background-color: white;
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
border-radius: 12px;
}
.radio-container input[type="radio"] {
display: none;
}
.radio-container label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 1rem /* 20px */;
}
.radio-container .custom-radio {
width: 25px; /* Increased size */
height: 25px; /* Increased size */
border: 2px solid #b0b0b0; /* Adjusted thickness */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition:
border-color 0.3s,
background-color 0.3s;
}
.radio-container .custom-radio::after {
content: "";
width: 15px;
height: 15px;
background-color: #b0b0b0;
border-radius: 50%;
display: none;
transition: background-color 0.3s;
}
.radio-container input[type="radio"]:checked + label .custom-radio {
border-color: #64d2b3;
}
.radio-container input[type="radio"]:checked + label .custom-radio::after {
display: block;
background-color: #64d2b3;
}
.radio-container label span {
margin-left: 5px;
color: #b0b0b0;
transition: color 0.3s;
}
.radio-container input[type="radio"]:checked + label span {
color: #64d2b3;
}