title: Create multiple checkboxes using the same CSS style
body: <p>I want to use a CSS styleheet for 3 different checkboxes on the same HTML page.I'm unsure how to declare the location of the checkboxes to make them all in line with the text. Here is my CSS stylesheet for the checkbox:</p>
  
  <pre><code>input[type=checkbox] 
  {
  visibility: hidden;
  } 
  
  .checkboxOne {
  background: none repeat scroll 0 0 #484848;
  border-radius: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  height: 40px;
  margin: -30px 200px;
  position: relative;
  width: 40px;
  }
  
  .checkboxOne input[type="checkbox"]:checked + label {
  background: none repeat scroll 0 0 #6E0000;
  }
  
  .checkboxOne  label:before {
  content:'N';
  padding:6px;
  color:#000000;
      display: block;
  padding: 4px;
  text-align: center;
  }
  
  .checkboxOne input[type="checkbox"]:checked + label:before {
    content:'Y';
  padding:6px;
  color:#FFFFFF;
      display:block;
  padding: 4px;
  text-align: center;
  }
  
  
  .checkboxOne label {
  background: none repeat scroll 0 0 #DDDDDD;
  border-radius: 100px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
  cursor: pointer;
  display: block;
  height: 30px;
  left: 5px;
  position: absolute;
  top: 5px;
  transition: all 0.5s ease 0s;
  width: 30px;
  z-index: 1;
  }
  </code></pre>
  
  <p>I know that margin is the location of the checkbox hard coded. I am hoping there is a way to make the checkboxes location inline right after the text in the html document, like this:</p>
  
  <pre><code>   Did you eat breakfast? &lt;div class="checkboxOne"&gt;
    &lt;input type="checkbox" value="1" id="checkboxInput" name="" /&gt;
    &lt;label for="checkboxInput"&gt;&lt;/label&gt;
    &lt;/div&gt;&lt;br&gt;
      Did you eat lunch? &lt;div class="checkboxOne"&gt;
    &lt;input type="checkbox" value="1" id="checkboxInput2" name="" /&gt;
    &lt;label for="checkboxInput2"&gt;&lt;/label&gt;
    &lt;/div&gt;&lt;br&gt;
      Did you eat dinner? &lt;div class="checkboxOne"&gt;
    &lt;input type="checkbox" value="1" id="checkboxInput3" name="" /&gt;
    &lt;label for="checkboxInput3"&gt;&lt;/label&gt;
    &lt;/div&gt;&lt;br&gt;
  </code></pre>