私のウェブページには複数のトグルボタンがあります。私はcheckbox
入力コントロールをいくつかのCSSで使用して、トグルボタンのトグルデザインを取得しています。いずれかのトグルボタンの状態を変更すると、CSSの効果が最初のトグルに反映されます。アクティブトグルだけにどのように効果を適用できますか?擬似CSSトランジションを使用してアクティブなトグルボタンのCSSを変更するには
<div>
<div class="material-toggle">
<input type="checkbox" id="toggle" name="toggle" checked=true class="switch" />
<label for="toggle" class=""></label>
</div>
<div class="material-toggle">
<input type="checkbox" id="toggle" name="toggle" checked=true class="switch" />
<label for="toggle" class=""></label>
</div>
</div>
私が使用しているCSSは次のとおりです。
.material-toggle {
height: 22px;
width: 40px;
margin: 12px;
}
.material-toggle input:empty {
margin-left: -9999px;
}
.material-toggle input:empty ~ label {
position: relative;
float: left;
width: 150px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.material-toggle input:empty ~ label:before,
.material-toggle input:empty ~ label:after {
position: absolute;
display: block;
content: ' ';
-webkit-transition: all 250ms cubic-bezier(.4,0,.2,1);
transition: all 250ms cubic-bezier(.4,0,.2,1);
}
.material-toggle input:empty ~ label:before {
top: 3px;
left: 0px;
width: 32px;
height: 13px;
border-radius: 12px;
background-color: #bdbdbd;
}
input.switch:empty ~ label:after {
top: -1px;
left: -9px;
width: 1.4em;
height: 8px;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 50%;
width: 17px;
height: 17px;
border-radius: 50%;
border: solid 2px;
border-color: #fff;
box-shadow: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);
}
.material-toggle input:checked ~ label:before {
background-color: #1e88e5;
}
.material-toggle input:checked ~ label:after {
left: 15px;
background-color: #1565c0;
border-color: #1565c0;
}
これにはcodepenを添付しています。
問題自体を – dippas
修正されませんうーんはい、それ意志 –
それはしないという。http://codepen.io/anon/pen/ZpWEmd – dippas