html - 将左侧放置的跨度的 CSS 更改为 input[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;
    }

}

I want to know how to do this :

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 以指定 HTML 中特定元素的 Flex 顺序:

.toggle_div {
flex-direction:row;
}

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