A div "check" deve vir após input
<form action="">
<div class="survey-option">
<input type="radio" name="survey" id="option1">
<div class="check"></div>
<label for="option1">Cicero are also reproduced in their exact original form</label>
</div>
<div class="survey-option">
<input type="radio" name="survey" id="option2">
<div class="check"></div>
<label for="option2">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for</label>
</div>
<div class="survey-option">
<input type="radio" name="survey" id="option3">
<div class="check"></div>
<label for="option3">The point of using Lorem Ipsum is that it has a</label>
</div>
<div class="survey-option">
<input type="radio" name="survey" id="option4">
<div class="check"></div>
<label for="option4">Various versions have evolved over the years, sometimes by</label>
</div>
<button type="submit" class="lg orange">Responder</button>
</form>
form {
.survey-option {
display: flex;
&:hover .check {
border: 2px solid #d95234;
}
input {
position: absolute;
visibility: hidden;
&:checked {
~.check {
border: 2px solid #d95234;
&::before {
background: #d95234;
height: 10px;
width: 10px;
margin: 2px auto;
}
}
~label {
color: #d95234;
}
}
}
.check {
display: block;
border: 2px solid #AAAAAA;
background: white;
border-radius: 100%;
height: 17px;
min-width: 17px;
margin-right: 10px;
transition: border .25s linear;
-webkit-transition: border .25s linear;
&::before {
display: block;
content: '';
border-radius: 100%;
height: 100%;
width: 100%;
margin: 2px auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
}
label {
font-family: Nunito;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #626262;
cursor: pointer;
}
}
button {
margin-top: 15px;
}
}