Как изменить CSS активной кнопки переключения с помощью псевдопереходов CSS

Question

У меня есть несколько кнопок переключения на моей веб-странице. Я использую управление вводами checkbox с некоторым 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 за то же самое.

Answer 1

, если вы хотите иметь несколько кнопок переключения, необходимо использовать идентификаторы, но имеют одинаковые идентификаторы в обоих тумблеров, которые не могут происходят потому, что идентификаторы уникальны, поэтому измените идентификатор и label for на целевые идентификаторы.

.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="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

Почему бы вам не использовать разные «id». Если я правильно понял вопрос, ответ есть:

<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>