Активный label и input

Question

Подскажите как сделать так, чтобы радиокнопка в состоянии активной была всегда другого цвета. То есть, у меня получилось сделать эффект при ховере, но я не очень понимаю как реализовать когда она активна. Там вроде не действует :active или :focus

 <div class="cooperation__wrapper-radio">
                        <input class="point point1" name="radio" value="1" id="request" type="radio" name="radio" value="1" checked>
                        <label for="request" class="radio-point"></label>
                        <label class="radio-label radio-label1" for="request">
                            <i class="radio-icon flaticon-phone-call"></i>
                            Оставьте заявку
                        </label>                       
                    </div>
                    <div class="cooperation__wrapper-radio">
                        <input class="point point2" name="radio" value="2" id="advice" type="radio" name="radio" value="1" checked>
                        <label for="advice" class="radio-point radio-point2"></label>
                        <label class="radio-label radio-label2" for="advice">
                            <i class="radio-icon flaticon-chat"></i>
                            Консультация  со специалистом
                        </label>
                    </div>

и css при ховере

.cooperation__wrapper-radio:hover .radio-point:hover {
    color: #68bec4;  
}
 .cooperation__wrapper-radio:hover .radio-icon::before, .cooperation__wrapper-radio:focus .radio-icon::before, .cooperation__wrapper-radio:active .radio-icon::before {
    color: #68bec4;
    transition: transform .2s ease;
}

Answer 1

Необходим псевдокласс :checked

Быстрый пример:

label {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid silver;
}

label input {
  display: none;
}

.radio_mark {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: red;
}

label input:checked+.radio_mark {
  display: block;
}

<label>
  <input type="radio" name="radio">
  <div class="radio_mark"></div>
</label>
<label>
  <input type="radio" name="radio">
  <div class="radio_mark"></div>
</label>

БЛОГ НА HUSL

Активный label и input

Ответы (1 шт):