第一个切换开关未显示

Question

当我执行此代码时，第一个切换开关未显示，但第二个切换开关正常显示并且也正常工作。我不知道代码出错了。请帮帮我

.switch input {
  display: none;
}

.switch {
  display: inline-block;
  width: 60px;
  height: 30px;
  margin: 8px;
  transform: translateY(50%);
  position: relative;
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #777;
  border-radius: 30px;
  transform: translateX(-30px);
  transition: .4s;
}

input:checked+.slider:before {
  transform: translateX(30px);
  background: limeGreen;
}

input:checked+.slider {
  box-shadow: 0 0 0 2px limeGreen, 0 0 2px limeGreen;
}

<div>
  <label class="switch">
                <input type="checkbox" value="Maths" name="Maths>
                <span class="slider"></span>
            </label> Maths
</div>
<div>
  <label class="switch">
                <input type="checkbox" name="Science" value="Science">
                <span class="slider"></span>
            </label> Science
</div>

第一个应与第二个一起显示。

Answer 1

你错过了“name="Maths之后

应该是：

<div>
    <label class="switch">
        <input type="checkbox" value="Maths" name="Maths">
        <span class="slider"></span>
    </label>
    Maths
</div>
<div>
    <label class="switch">
        <input type="checkbox" name="Science" value="Science">
        <span class="slider"></span>
    </label>
    Science
</div>

Answer 2

name="Maths至name="Maths"。您错过了"。检查一下。

   .switch input { 
    display:none;
}
.switch {
    display:inline-block;
    width:60px;
    height:30px;
    margin:8px;
    transform:translateY(50%);
    position:relative;
}

.slider {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:30px;
    box-shadow:0 0 0 2px #777, 0 0 4px #777;
    cursor:pointer;
    border:4px solid transparent;
    overflow:hidden;
     transition:.4s;
}
.slider:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    background:#777;
    border-radius:30px;
    transform:translateX(-30px);
    transition:.4s;
}

input:checked + .slider:before {
    transform:translateX(30px);
    background:limeGreen;
}
input:checked + .slider {
    box-shadow:0 0 0 2px limeGreen,0 0 2px limeGreen;
}

<div>
        <label class="switch">
            <input type="checkbox" value="Maths" name="Maths">
            <span class="slider"></span>
        </label>
        Maths
    </div>
    <div>
        <label class="switch">
            <input type="checkbox" name="Science" value="Science">
            <span class="slider"></span>
        </label>
        Science
    </div>

Answer 3

您刚收到拼写错误，即在name="Maths

之后缺少倒置的逗号“

.switch input {
  display: none;
}

.switch {
  display: inline-block;
  width: 60px;
  height: 30px;
  margin: 8px;
  transform: translateY(50%);
  position: relative;
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #777;
  border-radius: 30px;
  transform: translateX(-30px);
  transition: .4s;
}

input:checked+.slider:before {
  transform: translateX(30px);
  background: limeGreen;
}

input:checked+.slider {
  box-shadow: 0 0 0 2px limeGreen, 0 0 2px limeGreen;
}

<div>
  <label class="switch">
                <input type="checkbox" value="Maths" name="Maths">
                <span class="slider"></span>
            </label> Maths
</div>
<div>
  <label class="switch">
                <input type="checkbox" name="Science" value="Science">
                <span class="slider"></span>
            </label> Science
</div>