CSS изменения диапазона, помещенного слева, для ввода [type=checkbox]

Question

Кто-нибудь знает, как я могу изменить непрозрачность диапазона, размещенного слева от ввода [type=checkbox], когда флажок установлен, вот мой HTML-код.

HTML:

<div class="toggle_div">
    <span class="toggle_left">NO</span>      //-> I want to change the style opacity when checkbox is checked 
    <input type="checkbox" id="switch_trail" />
     <label for="switch_trail"></label>
    <span class="toggle_right">SI</span>
</div>

вот мой псевдо SCSS:

SCSS:

$bg-box: #07a7e3;
$bg-box-gradient: #37d6c0;

div.toggle_div {
    display:flex;

    input[type=checkbox]{
        height: 0;
        width: 0;
        visibility: hidden;
    }

    label {
        cursor: pointer;
        text-indent: -9999px;
        width: 200px;
        height: 100px;
        background: grey;
        opacity: .5;
        display: block;
        border-radius: 100px;
        position: relative;
    }

    label:after {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        width: 90px;
        height: 90px;
        background: #fff;
        border-radius: 90px;
        transition: 0.3s;
    }

    input[type=checkbox]:checked + label {
        background-color: $bg-box;
        background: -webkit-gradient(linear, left top, right top, from($bg-box), to($bg-box-gradient));
        background: -webkit-linear-gradient(left, $bg-box, $bg-box-gradient);
        background: -moz-linear-gradient(left, $bg-box, $bg-box-gradient);
        background: -ms-linear-gradient(left, $bg-box, $bg-box-gradient);
        background: -o-linear-gradient(left, $bg-box, $bg-box-gradient);
        background: linear-gradient(to right, $bg-box, $bg-box-gradient);
        opacity: 1;
    }

    input[type=checkbox]:checked + label:after {
        left: calc(100% - 5px);
        transform: translateX(-100%);
    }

    label:active:after {
        width: 130px;
    }

    span.toggle_left{
        padding: 35px 0px 0px 10px;
        font-family: 'Open Sans';
        color: gray;
        font-weight: 400;
        font-size: 150%;
        opacity: .5;
    }

    span.toggle_right{
        padding: 35px 0px 0px 20px;
        font-family: 'Open Sans';
        color: gray;
        font-weight: 400;
        font-size: 150%;
        opacity: .5;
    }

    input[type=checkbox]:checked + label +  span.toggle_right{
        color: $bg-box-gradient;
        opacity: 1;
    }

    input[type=checkbox]:not(:checked) + label + span.toggle_left{
        opacity: 1;
    }

}

Я хочу знать, как это сделать:

input[type=checkbox]:not(:checked) + label + span.toggle_left{
    opacity: 1;
}

Для того, чтобы изменить непрозрачность диапазона, который находится слева от переключателя

Благодарю.

Answer 1

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

Вы можете попробовать это: HTML:

<div class="toggle_div">opacity when checkbox is checked 
<input type="checkbox" id="switch_trail" />
<span class="toggle_left">NO</span>      //-> I want to change the style 
 <label for="switch_trail"></label>
<span class="toggle_right">SI</span>

А затем, увидев, что вы используете Flex, обновите свой CSS, чтобы указать порядок Flex определенных элементов в вашем HTML:

.toggle_div {
flex-direction:row;
}

span.toggle_left{
    ...
    order:1
    ...
}
#switch_trail{
    ...
    order:2
    ...
}
span.toggle_right{
    ...
    order:3
    ...
}