title: styling checkbox with css3 doesn't show label in the proper way
body: <p>I have the following CSS code:</p>
  
  <pre><code>body {
      background: #555;
  }
  
  
  
  input[type=checkbox] {
      visibility: hidden;
  }
  
  
  /* SQUARED THREE */
  .squaredThree {
      width: 20px;    
      margin: 20px auto;
      position: relative;
  }
  
  .squaredThree label {
      cursor: pointer;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 0;
      border-radius: 4px;
  
      -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
      -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
      box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
  
      background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
      background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
      background: -o-linear-gradient(top, #222 0%, #45484d 100%);
      background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
      background: linear-gradient(top, #222 0%, #45484d 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
  }
  
  .squaredThree label:after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
      content: '';
      position: absolute;
      width: 9px;
      height: 5px;
      background: transparent;
      top: 4px;
      left: 4px;
      border: 3px solid #fcfff4;
      border-top: none;
      border-right: none;
  
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }
  
  .squaredThree label:hover::after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
      filter: alpha(opacity=30);
      opacity: 0.3;
  }
  
  .squaredThree input[type=checkbox]:checked + label:after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
  }
  
  /* SQUARED FOUR */
  .squaredFour {
      width: 20px;    
      margin: 20px auto;
      position: relative;
  }
  
  .squaredFour label {
      cursor: pointer;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 0;
      border-radius: 4px;
  
      -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
      -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
      background: #fcfff4;
  
      background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
  }
  
  .squaredFour label:after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
      content: '';
      position: absolute;
      width: 9px;
      height: 5px;
      background: transparent;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
  
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }
  
  .squaredFour label:hover::after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
      filter: alpha(opacity=30);
      opacity: 0.5;
  }
  
  .squaredFour input[type=checkbox]:checked + label:after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
  }
  </code></pre>
  
  <p>and the simple html code:</p>
  
  <pre><code>&lt;!-- Squared THREE --&gt;
  &lt;div class="squaredThree"&gt;
      &lt;input type="checkbox" value="None" id="squaredThree" name="check" /&gt;
      &lt;label for="squaredThree"&gt;here is another label&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;!-- Squared FOUR --&gt;
  &lt;div class="squaredFour"&gt;
      &lt;input type="checkbox" value="None" id="squaredFour" name="check" /&gt;
      &lt;label for="squaredFour"&gt;here is some label&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And as you can see in the following <a href="http://jsfiddle.net/2vL416by/" rel="nofollow">jsfiddle</a> - the result is far from expected, the label is on the box and it's not in one single line.. What can I do to fix it and to show it in a way checkbox-label (single line)?</p>