title: Should input checkbox outline include margins or not?
body: <p>Input checkbox outline in Chrome behaves itself really odd.</p>
  <p>Generally, outline doesn't include margins, but when you set the focus on it with the keyboard (! not the mouse), it starts including margins. For the tag types other than input (as well, as for the other input type) everything works fine (outline never includes margins). In Firefox everything works fine as well.</p>
  <p>Here is the JsFiddle to test this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.error input {
    outline: 2px solid #c00;
    margin: 2px;
  }
  
  .error input[type=checkbox] {
    outline: 2px solid #c00;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="error"&gt;
    &lt;input type='checkbox'&gt;&lt;label&gt;Some label&lt;/label&gt;
    &lt;input type='text'&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://jsfiddle.net/71ybetjv/" rel="nofollow noreferrer">http://jsfiddle.net/71ybetjv/</a></p>
  <p>Is this a Chrome bug? And is there any workaround for that?</p>