title: Different Chrome checkbox size
body: <p>I would like to resolve, in some elegant way, a design problem which only happens in Chrome.
  When I wrap “input” type checkbox with <code>div</code> which has bootstrap class <code>col-…</code>. This <code>div</code> div is filled by checkbox, but in Chrome the checkbox also changes size (gets bigger)
  I found a solution, which basically resolves problem, but is not ideal.</p>
  
  <pre><code> @media (-webkit-min-device-pixel-ratio: 0) {
         [class*="col-"] input[type=checkbox] {
              -webkit-transform: scale(0.5) !important;
          }
      }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/Pmilan/2cm7vn9s/" rel="nofollow noreferrer">JSFiddle example</a></p>
  
  <p>Firstly, I need to make this rule for Chrome only,  because according to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio" rel="nofollow noreferrer">MDN</a> this not best practice.
  Secondly, the change of scale not only affects the size of the check box, but also everything within the div. Due to that, I lose the feature, that customer must not click exactly into the check-box to get it checked.
  Is there any better solution?</p>
  
  <p> </p>