<form action="">
<label class="radio">
<input name="${question.id_question}" type="radio" value="1">
<span>Verdadeiro</span>
</label>
<label class="radio">
<input name="${question.id_question}" type="radio" value="2">
<span>Falso</span>
</label>
<button type="submit" class="submitQuizz">Enviar Resposta</button>
</form>
$color-radio1: #fff;
$color-radio2: #d95234;
form {
>label.radio {
>input {
position: absolute;
opacity: 0;
&:checked {
+span {
&:before {
background-color: $color-radio2;
box-shadow: inset 0 0 0 4px $color-radio1;
}
}
}
&:focus {
+span {
&:before {
outline: none;
border-color: $color-radio2;
}
}
}
&:disabled {
+span {
&:before {
box-shadow: inset 0 0 0 4px $color-radio1;
border-color: darken($color-radio1, 25%);
background: darken($color-radio1, 25%);
}
}
}
}
>span {
&:before {
content: '';
background: $color-radio1;
border-radius: 100%;
border: 1px solid darken($color-radio1, 25%);
display: inline-block;
width: 1.4em;
height: 1.4em;
position: relative;
top: -0.2em;
margin-right: 1em;
vertical-align: top;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
&:empty {
&:before {
margin-right: 0;
}
}
}
}
}