felvieira
2/7/2019 - 1:51 AM

Radio Button Estilizado 2

<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;
                }
            }
        }
    }
}