title: Checkbox does not style in mac chrome
body: <p>I am trying to a style a checkbox in bootstrap. Which includes increasing height and width and changing the border. But with hard luck I found that
  the only way was  using -webkit. Here is the code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input.largerCheckbox {
    width: 30px;
    height: 30px;
    -webkit-transform: scale(1.3, 1.3);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" class="largerCheckbox" name="checkBox"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><em>In the above snippet, even the scale is zooming the checkbox the bigger size I wanted. It is simply distorted or out of shape.</em></strong>
  Is there any better way, Also border does not work. Any suggestions?</p>
  
  <p>Note: I meant out of shape in mobile phones like iPhone or Android</p>