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

您忘记在left: 0px类中插入.checkbox label{...}，因为您希望转换将应用于x-Axis中的转换。这是一个工作片段。

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

CSS Transitions for checkbox不起作用

1 个答案: