title: CSS Transitions for checkbox not working
body: <p>I have this piece of HTML (placed on CSSDesk):</p>
  
  <pre><code>&lt;section style="margin-top: 50px;"&gt;
    &lt;header style="margin-bottom: 30px;"&gt;My checkboxes&lt;/header&gt;
    &lt;div class="checkbox"&gt;
      &lt;input type="checkbox" id="checkbox"/&gt;
      &lt;label for="checkbox"&gt;&lt;/label&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And this piece of CSS, also placed on CSSDesk:</p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p>Impressed by <a href="http://www.paulund.co.uk/playground/demo/css-style-checkboxes/" rel="nofollow" title="Paul Underwood&#39;s checkboxes">Paul Underwood checkboxes</a> I follow his tutorial: <a href="http://www.paulund.co.uk/style-checkboxes-with-css" rel="nofollow" title="How To Style A Checkbox With CSS">How To Style A Checkbox With CSS</a>. 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: <a href="http://cssdeck.com/labs/vqmzfhxc" rel="nofollow" title="Decorative checkboxes">CSS Desk Decorative checkboxes</a>. I will be pleased if anybody decides to help me - thank you in advance. My browser - Opera 25.0</p>