Chenge CSS of span placed left to input[type=checkbox]

Question

does anyone know how can I change the opacity of the span placed at the left of a input[type=checkbox] when checkbox is checked, here is my HTML code.

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>

here is my pseudo 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;
    }

}

I want to know how to do this :

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

In order to change the opacity of the span that is placed at the left of the switch

Thanks.

Answer 1

The CSS syntax requires that the span that you wan't to modify in relation to the checkbox, must come after the checkbox, in your HTML.

You could try this: 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>

And then, seeing your are using Flex, update your CSS to specify the Flex Order of particular elements in your HTML:

.toggle_div {
flex-direction:row;
}

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