復選框的CSS轉換不起作用

Question

我有一段HTML（放在CSSDesk上）：

<section style="margin-top: 50px;">
  <header style="margin-bottom: 30px;">My checkboxes</header>
  <div class="checkbox">
    <input type="checkbox" id="checkbox"/>
    <label for="checkbox"></label>
  </div>
</section>

這段CSS，也放在CSSDesk上：

input[type="checkbox"]{
  display: none;
}
.checkbox{
  position: relative;
  width: 60px;
  height: 2px;
  background-color: black;
  border-radius: 10%;
}

.checkbox input[type="checkbox"] + label{
  top: -10px;
  cursor: pointer;
  position: absolute; /*otherwise ,,left: x px;" isn't working*/
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: blue;

  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
   transition: all .5s ease;
}

.checkbox input[type="checkbox"]:checked + label{
  left: 80%;
}

保羅·安德伍德 （ Paul Underwood）復選框給我留下了深刻的印象，我遵循他的教程：《 如何使用CSS設置復選框樣式》 。 不幸的是，過渡（我從教程中復制了100％）無效。 我不知道為什么。 這是我的完整代碼，放在CSS Desk中： CSS Desk Decorative復選框 。 如果有人決定幫助我，我將非常高興-預先感謝您。 我的瀏覽器-Opera 25.0

Answer 1

您忘記在.checkbox label{...}類中插入left: 0px ，因為您希望過渡將應用於x軸中的變換。 這是一個工作片段。

 input[type="checkbox"] { display: none; } .checkbox { position: relative; width: 60px; height: 2px; background-color: black; border-radius: 10%; } .checkbox label { /*insert next line*/ left: 0px; top: -10px; cursor: pointer; position: absolute; /*otherwise ,,left: x px;" isn't working*/ display: block; width: 20px; height: 20px; border-radius: 100%; background-color: blue; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } .checkbox input[type="checkbox"]:checked + label { left: 80%; } 

 <section style="margin-top: 50px;"> <header style="margin-bottom: 30px;">My checkboxes</header> <div class="checkbox"> <input type="checkbox" id="checkbox" /> <label for="checkbox"></label> </div> </section>