html - 复选框的 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 checkboxes我遵循他的教程:How To Style A Checkbox With CSS .不幸的是，过渡(我从教程中 100% 复制)没有用。我不知道为什么。这是我的全部代码，放在 CSS Desk 中:CSS Desk Decorative checkboxes .如果有人决定帮助我，我会很高兴 - 提前谢谢你。我的浏览器 - Opera 25.0

Answer 1

您忘记在 .checkbox label{...} class 中插入 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>