Should input checkbox outline include margins or not?-CodePudding

Input checkbox outline in Chrome behaves itself really odd.

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.

Here is the JsFiddle to test this:

.error input {
  outline: 2px solid #c00;
  margin: 2px;
}

.error input[type=checkbox] {
  outline: 2px solid #c00;
}

<div >
  <input type='checkbox'><label>Some label</label>
  <input type='text'>
</div>

http://jsfiddle.net/71ybetjv/

Is this a Chrome bug? And is there any workaround for that?

CodePudding user response：

Chromes default :focus-visible style contains outline-offset: 2px;.

This can be overwritten: (Though it's worth noting that you should replace it with another clear "focused" style for accessibility)

.error input {
  outline: 2px solid #c00;
  margin: 2px;
}
.error input:focus-visible {
  outline-offset: 0;
}
.error input[type=checkbox] {
  outline: 2px solid #c00;
}

<div >
  <input type='checkbox'><label>Some label</label><br />
  <input type='text' />
</div>