CSS меняет фон метки другого элемента, когда установлен переключатель

Question

Я хочу изменить цвет фона класса меток 'label-status', в зависимости от того, установлен ли переключатель на согласие или несогласие.

<div class="testclass">
    <label class="label-status">Status</label>
    <label class="radio-inline" style="display:inline-block;"><input type="radio" name="status" disabled="">Agree</label>
    <label class="radio-inline" style="display:inline-block;"><input type="radio" name="status" checked="" disabled="">Disagree</label>
</div>

Поскольку это не мой веб-сайт, а некоторыеПользовательский пользовательский CSS, который я хочу внедрить, чтобы сделать его более удобным, я не могу вносить какие-либо изменения в настоящий html.

Спасибо за ваши ответы заранее.

Answer 1

.buttons {
    display: flex
    align-item: center;
}

.condition {
    padding-right: 50px;
}

.status {
    order: -1;
    padding: 5px;
    border: 2px solid #000;
    color: #fff;
}

.buttons > input:first-of-type:checked ~ .status {
    background: green;
}
.buttons > input:last-of-type:checked ~ .status {
    background: red;
}

<div class="buttons">
    <input type="radio" name="status" id="agree">
    <label for="agree" class="condition">Agree</label>
    <input type="radio" name="status" id="disagree" checked>
    <label for="disagree" class="condition">Disagree</label>
    <label class="status">Status</label>
</div>

Answer 2

Некоторые чистые CSS-решения, похоже, упускают из-за того, что вам не разрешено изменять HTML.

Вам разрешено использовать javascript?

Вот некоторый javascript без JQuery:

    var updateLabel = function(e) {
          var label = document.getElementsByClassName("label-status")[0];
          if (e.target !== e.currentTarget && event.target.type === "radio") {
            if(e.target.labels[0].innerText === "Agree") {
              label.style.background = "green"
            } else {
              label.style.background = "red";
            }
          }
          e.stopPropagation();
        }

    var wrapperElement = document.getElementsByClassName("testclass")[0];
    wrapperElement.addEventListener("click", updateLabel, false);

https://codepen.io/anon/pen/MXWJXK

Вы должны удалить атрибут disabled с ваших радиокнопок.С javascript вы можете использовать element.removeAttribute («отключен»).

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Answer 3

Вы можете воспользоваться order свойством ( Flexbox или Grid ) вместе с атрибутом for длясвязать label с соответствующим элементом input:

.testclass {display: flex} /* displays flex-items (children) inline; can also use the "inline-flex" which only takes the content's width */

.label-status {order: -1} /* puts it back to the desired place (above other siblings); the initial value is set to 0 */

.testclass > input:first-of-type:checked ~ .label-status {background: green}
.testclass > input:last-of-type:checked ~ .label-status {background: red}

<div class="testclass">
  <input type="radio" name="status" id="agree">
  <label for="agree">Agree</label>
  <input type="radio" name="status" id="disagree" checked>
  <label for="disagree">Disagree</label>
  <label class="label-status">Status</label> <!-- needs to be placed below other siblings in order to take advantage of the "~" selector -->
</div>

Тогда вы можете использовать общий родственный комбинатор ~ to target the.label-status с, например, :first-of-type & :last-of-type селекторами , установленными для input элементов , конечно, в сочетании с селектором псевдокласса :checked .

Answer 4

По умолчанию ваши входы отключены.сначала вы должны удалить свойство disable, а затем добавить атрибуты onclick, чтобы запустить функцию, которая изменит цвет фона.

 document.getElementsByName('status')[0].removeAttribute("disabled")
 document.getElementsByName('status')[1].removeAttribute("disabled")
 document.getElementsByClassName('radio-inline')[0].setAttribute("onclick","myFunction()")
 document.getElementsByClassName('radio-inline')[1].setAttribute("onclick","myFunction()")
 function myFunction(){
    if (document.getElementsByName('status')[1].checked) {
        document.getElementsByClassName("label-status")[0].classList.remove("myclass2")
        document.getElementsByClassName("label-status")[0].classList.add("myclass1");
    }
    else if (document.getElementsByName('status')[0].checked) {
        document.getElementsByClassName("label-status")[0].classList.remove("myclass1")
        document.getElementsByClassName("label-status")[0].classList.add("myclass2");
    }
 }

вам нужно определить свой css для myclass1 и myclass2 в соответствии с требованиями к цвету фона.

это невозможно при использовании чистого CSS, поскольку вы не можете динамически читать значения с помощью CSS.так что если вы можете использовать js, то это решит вашу проблему без редактирования html.

Answer 5

Вы можете использовать JS, например, так:

$(document).ready(function() {
   $(".label-status").on("click",function() {
            if($(this).find('input[type="radio"]').is(':checked')) { 
          $('.radio-inline').removeClass('sel_bk_color');
          $(this).addClass('sel_bk_color');
        }
    });
});

Вот пример такого рода вещей в действии: https://jsfiddle.net/tr9Lyxz3/1/