0

Подскажите как сделать так, чтобы радиокнопка в состоянии активной была всегда другого цвета. То есть, у меня получилось сделать эффект при ховере, но я не очень понимаю как реализовать когда она активна. Там вроде не действует :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;
}
2
  • Псевдокласс :active проявляет себя не постоянно, а непосредственно в момент нажатия, после снова возвращается к :hover
    – UModeL
    21 сен 2020 в 9:59
  • Вам скорее всего необходим другой псевдокласс - :checked
    – UModeL
    21 сен 2020 в 10:05

1 ответ 1

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>

3
  • в моём примере label и input находятся в диве, и почему-то checkedне работает на них
    – venus
    21 сен 2020 в 10:53
  • @Крис :checked применим только к input. Проще говоря: input:checked {/*стили для того как должен выглядеть чекнутый инпут*/}
    – Oleg
    21 сен 2020 в 11:32
  • да, точно. просто у меня там несколько label, поэтому было запутано сначала, не получалось. сейчас всё работает, спасибо
    – venus
    21 сен 2020 в 12:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.