Chenge CSS of span placed left to input[type=checkbox]
Chenge CSS of span placed left to input[type=checkbox]
有谁知道如何在选中复选框时更改输入 [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;
}
为了改变放置在开关左侧的跨度的不透明度
谢谢。
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
...
}
有谁知道如何在选中复选框时更改输入 [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;
}
为了改变放置在开关左侧的跨度的不透明度
谢谢。
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
...
}