title: HTML, CSS and CheckBoxes
body: <p>I'm trying to render some html checkboxes using css.</p>
  
  <p>I want it to look something like this (with all of the check boxes on one horizontal line and labeled):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
  
    &lt;center&gt;
  
      &lt;form id="pluginsForm"&gt;
        &lt;input type="checkbox" value="Button_1" name="plugin"&gt;Button_1
        &lt;input checked type="checkbox" value="Button_2" name="plugin"&gt;Button_2
        &lt;input type="checkbox" value="Button_3" name="plugin"&gt;Button_3
        &lt;input checked type="checkbox" value="Button_4" name="plugin"&gt;Button_4
        &lt;br&gt;
        &lt;br&gt;
        &lt;input type="BUTTON" value="Go" onclick="alert('GO')"&gt;
      &lt;/form&gt;
  
    &lt;/center&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But using some fancy css stuff, and I can't seem to get it to work.  The text doesn't appear correctly, its in mutliple lines, and the right button isn't shown as clicked when one is selected.  (Based on an example from <a href="http://cssdeck.com/labs/css-checkbox-styles" rel="nofollow">here</a>)  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
  
  &lt;head&gt;
  
  &lt;style&gt;
  
  body {
   background: #555;
  }
  
  h1 {
   color: #eee;
   font: 30px Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   text-shadow: 0px 1px black;
   text-align: center;
   margin-bottom: 50px;
  }
  
  input[type=checkbox] {
   visibility: hidden;
  }
  /* SQUARED ONE */
  .squaredOne {
   width: 28px;
   height: 28px;
   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 );
   margin: 20px auto;
   -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);
   position: relative;
  }
  
  .squaredOne label {
   cursor: pointer;
   position: absolute;
   width: 20px;
   height: 20px;
   left: 4px;
   top: 4px;
  
   -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
   -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
  
   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 );
  }
  
  .squaredOne label:after {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   content: '';
   position: absolute;
   width: 16px;
   height: 16px;
   background: #00bf00;
  
   background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
   background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
   background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
   background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
   background: linear-gradient(top, #00bf00 0%, #009400 100%);
  
   top: 2px;
   left: 2px;
  
   -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);
  }
  
  .squaredOne label:hover::after {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
   filter: alpha(opacity=30);
   opacity: 0.3;
  }
  
  .squaredOne input[type=checkbox]:checked + label:after {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
   &lt;center&gt;
  
        &lt;form id="pluginsForm" &gt;
  
    &lt;div class="squaredOne"&gt;
     &lt;input type="checkbox" value="Button_1" id="squaredOne" name="check" /&gt;
     &lt;label for="squaredOne"&gt;Button_1&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="squaredOne"&gt;
     &lt;input checked type="checkbox" value="Button_2" id="squaredOne" name="check" /&gt;
     &lt;label for="squaredOne"&gt;Button_2&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="squaredOne"&gt;
     &lt;input type="checkbox" value="Button_3" id="squaredOne" name="check" /&gt;
     &lt;label for="squaredOne"&gt;Button_3&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="squaredOne"&gt;
     &lt;input checked type="checkbox" value="Button_4" id="squaredOne" name="check" /&gt;
     &lt;label for="squaredOne"&gt;Button_4&lt;/label&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;br&gt;
          &lt;input type="BUTTON" value="Go" onclick="alert('GO')"&gt;
        &lt;/form&gt;
  
     &lt;/center&gt;
  
   &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>