CODEWITHSUNDEEP
htmlcsscss-transitionstransition
Radek Anuszewski
Radek Anuszewski

Reputation: 1910

CSS Transitions for checkbox not working

I have this piece of HTML (placed on 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>

And this piece of CSS, also placed on 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%;
}

Impressed by Paul Underwood checkboxes I follow his tutorial: How To Style A Checkbox With CSS. Unfortunately, transition (I copied in 100% from tutorial) didn't work. And I don;t have any idea why. Here is my entire code, placed in CSS Desk: CSS Desk Decorative checkboxes. I will be pleased if anybody decides to help me - thank you in advance. My browser - Opera 25.0

Upvotes: 0

Views: 5250

Answers (1)

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

You forgot to insert left: 0px in .checkbox label{...} class , because you expect that transition will be applied to transformation in x-Axis. Here is a working snippet.

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>

Upvotes: 2

Related Questions