Css radio: CSS стилизация checkbox и radio — 2 варианта

html — Как управлять другим элементом, когда переключатель установлен на css?

спросил

Изменено 1 год, 11 месяцев назад

Просмотрено 882 раза

Как изменить другой элемент, когда установлен переключатель? Я использовал символ (~) в своем коде CSS, но он ничего не делает вот мой код:

 .плати{
    курсор: указатель;
  ширина: 100%;
    дисплей: блок;
    отступ: 8px;
    радиус границы: 5px;
    box-sizing: граница-коробка;
    граница: 1px сплошной серый;
}
.проверьте ввод[type="радио"]{
    дисплей: нет;
}
/*Это код, с которым я хочу работать*/
.check input[type="radio"]:checked ~ .pay{
    фон: серый;
  цвет: #888888;
} 
 <дел>
                        <дел>
                            
<дел>
  • html
  • css
  • переключатель

2

‘~’ эти маленькие волнистые линии применимы только к контейнерам родственного уровня, которые следуют, перепишите свой html следующим образом, и все готово!

 <дел> <дел>
      
      
      
    
<дел>

https://jsfiddle.

net/bwczegym/5/

Если вы переместите label.pay после кнопки радио , то я думаю, что ваш css делает то, что вы намеревались.

 .плати{
    курсор: указатель;
    ширина: 100%;
    дисплей: блок;
    отступ: 8px;
    радиус границы: 5px;
    box-sizing: граница-коробка;
    граница: 1px сплошной серый;
}
.проверьте ввод[type="радио"]{
    дисплей: нет;
}
/*Это код, с которым я хочу работать*/
.check input[type="radio"]:checked ~ .pay{
    фон: серый;
    цвет: #888888;
} 
 <дел>
  <дел>