如何更改使用僞CSS主動切換按鈕的CSS轉換

Question

我有我的網頁上的多個切換按鈕。我使用一些CSS的checkbox輸入控件來獲得材質切換按鈕設計。當我更改任何切換按鈕的狀態時，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爲相同。

Answer 1

，如果你想有多個切換按鈕，你需要使用的ID，但你必須在二者切換的編號相同，哪些不能發生是因爲ID是唯一的，因此請更改ID和label for以定位這些ID。

.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; 
 
}

<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="toggle2" name="toggle" checked=true class="switch" /> 
 
    <label for="toggle2" class=""></label> 
 
    </div> 
 
</div>

Answer 2

你需要的唯一ID，目前它們都具有id="toggle"

<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="toggle2" name="toggle" checked=true class="switch" /> 
    <label for="toggle2" class=""></label> 
    </div> 
</div> 

Answer 3

<div> 
    <div class="material-toggle"> 
    <input type="checkbox" id="toggle" name="toggle" class="switch" /> 
    <label for="toggle" class=""></label> 
    </div> 
    <div class="material-toggle"> 
    <input type="checkbox" id="toggle-2" name="toggle" class="switch" /> 
    <label for="toggle-2" class=""></label> 
    </div> 
</div> 

我解決分配不同的標籤爲值。我做了一個材質主題切換器，但是我使用Javascript和Jquery使它在頁面中與多個切換器一起工作。

Answer 4

你爲什麼不使用不同的「身份證」。 如果我理解這個問題，答案是：

<div> 
    <div class="material-toggle"> 
     <input type="checkbox" id="toggle1" name="toggle" checked=true class="switch" /> 
     <label for="toggle1" class=""></label> 
    </div> 
    <div class="material-toggle"> 
     <input type="checkbox" id="toggle2" name="toggle" checked=false class="switch" /> 
     <label for="toggle2" class=""></label> 
    </div> 
</div>