Question

此Codepen具有“是/否”切换。将切换钮移到上方后，不会显示“是”，但是“否”有效吗？什么CSS会显示“是”？

input [type =“ radio”]。toggle { 显示：无；

& + label{
    cursor: pointer;
    min-width: 60px;
     border-radius: 30px; 

    &:hover{
        background: none; 

    }
    &:after{
        background: blue;
        content: "";
        height: 100%;
        position: absolute;
       z-index:-1;

     border-radius: 30px;
        top: 0;
        transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
        width: 100%;

    }
}
&.toggle-left + label {
    border-right: 0;
     color: #fff; 
    &:after{
        left: 100%;
    }
}
&.toggle-right + label{
    margin-left: -5px;
     color: #fff; 
    &:after{
        left: -100%; 
    }
}
&:checked + label {
    cursor: default;
    color: #fff;
    transition: color 200ms;
    &:after{
        left: 0;  
    }
}

}

Answer 1

我认为您正在寻找这个

body {
  background-color: #ddd;
}


/*Style main div and remove default checkbox*/

.switch {
  position: relative;
  width: 75px;
  margin: 0 auto;
}

.switch-checkbox {
  display: none;
}


/*Style words and oval switch */

.switch-labels {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 20px;
}

.switch-text {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.switch-text:before,
.switch-text:after {
  float: left;
  width: 50%;
  line-height: 30px;
  color: white;
  box-sizing: border-box;
}

.switch-text:before {
  content: "ON";
  padding-left: 10px;
  background-color: #E1F6FF;
  color: #000000;
}

.switch-text:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #4D5585;
  color: #FFFFFF;
  text-align: right;
}


/*Style center dot*/

.switch-dot {
  width: 30px;
  height: 30px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 41px;
  margin-right: 5px;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.switch-dot:after{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-image: url('http://www.free-icons-download.net/images/multiply-icon-27981.png');
    margin: 5px 0 0 5px;
}


/*State changer*/

.switch-checkbox:checked+.switch-labels .switch-text {
  margin-left: 0;
}

.switch-checkbox:checked+.switch-labels .switch-dot {
  right: 0px;
  margin-right: 0px;
}

<div class="switch">
  <input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>
  <label class="switch-labels" for="myswitch">
        <span class="switch-text"></span>
        <span class="switch-dot"></span>
    </label>
</div>

使用2个文本作为打开和关闭

.toggle-label {
  position: relative;
  display: block;
  width: 300px;
  height: 80px;
  margin-top: 8px;
  border: 1px solid #808080;
margin: 200px auto;
}
.toggle-label input[type=checkbox] { 
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
.toggle-label input[type=checkbox]+.back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ed1c24;
  transition: background 150ms linear;  
}
.toggle-label input[type=checkbox]:checked+.back {
  background: #00a651; /*green*/
}

.toggle-label input[type=checkbox]+.back .toggle {
  display: block;
  position: absolute;
  content: ' ';
  background: #fff;
  width: 50%; 
  height: 100%;
  transition: margin 150ms linear;
  border: 1px solid #808080;
  border-radius: 0;
}
.toggle-label input[type=checkbox]:checked+.back .toggle {
  margin-left: 150px;
}
.toggle-label .label {
  display: block;
  position: absolute;
  width: 50%;
  color: #000;
  line-height: 80px;
  text-align: center;
  font-size: 2em;
}
.toggle-label .label.on { left: 0px; }
.toggle-label .label.off { right: 0px; }

.toggle-label input[type=checkbox]:checked+.back .label.on {
  color: #fff;
}
.toggle-label input[type=checkbox]+.back .label.off {
  color: #000;
}
.toggle-label input[type=checkbox]:checked+.back .label.off {
  color: #000;
}

<label class='toggle-label'>
 <input type='checkbox'/>
	 <span class='back'>
		<span class='toggle'></span>
 		<span class='label on'>ON</span>
		<span class='label off'>OFF</span>  
	</span>
</label>

Answer 2

您为toggle-right和:after添加了2个蓝色气泡，因为您只需要一个从一个移动到另一个。对于您的情况，为了不超过“是”，应删除toggle-right中的.toggle-switch-container { position: relative; line-height: 32px; border-radius: 30px; width: fit-content; margin-left: auto; margin-right: auto; margin-bottom:25px; background-color: rgba(0, 0, 0, 1); z-index:1; } .btn{ display: inline-block; padding: 10px; position: relative; text-align: center; transition: background 600ms ease, color 600ms ease; z-index:100; } input[type="radio"].toggle { display: none; & + label{ cursor: pointer; min-width: 60px; border-radius: 30px; &:hover{ background: none; } } &.toggle-left + label { border-right: 0; color: #fff; &:after{ background: blue; content: ""; height: 100%; position: absolute; z-index:-1; border-radius: 30px; top: 0; transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1); width: 100%; left: 100%; } } &.toggle-right + label{ margin-left: -5px; color: #fff; } &:checked + label { cursor: default; color: #fff; transition: color 200ms; &:after{ left: 0; } } }。试试这个：

z-index

为简单起见，它为何起作用：对于2个具有相同toggle的元素，最后一个元素位于另一个元素的前面。您的2个z-index按钮具有相同的:after，因此它们的toggle-right:after，因此toggle-left位于:after前面，阻止了“是”。通过删除toggle-right中的body，可以删除阻止解决问题的“是”元素。

缺少CSS来修复此拨动开关，z-index问题？

2 个答案: