<form class="favorites__form">
<label class="favorites__label">
<input class="favorites__input" type="radio" name="season" value="winter" checked>
Winter
</label>
<label class="favorites__label">
<input class="favorites__input" type="radio" name="season" value="spring">
Spring
</label>
<label class="favorites__label">
<input class="favorites__input" type="radio" name="season" value="summer">
Summer
</label>
<label class="favorites__label">
<input class="favorites__input" type="radio" name="season" value="Autumn">
Autumn
</label>
</form>
.favorites {
&__text {
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 40px;
}
&__form {
display: flex;
gap: 93px;
}
&__label {
display: flex;
align-items: center;
gap: 20px;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&__input[type='radio'],
label {
cursor: pointer;
}
&__input[type='radio'] {
position: relative;
height: 17px;
width: 17px;
appearance: none;
appearance: none;
appearance: none;
outline: none;
}
&__input[type='radio']::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 17px;
height: 17px;
border-radius: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 2px solid #000;
}
&__input[type='radio']:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%);
visibility: visible;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.