Why does input[type="text"] change size on focus?

Question

Say I have an input.

html

<input type="text">

css:

input, input:focus {
  border: none;
  outline: solid 1px grey;
  box-shadow: none;
}

When clicked, the input changes size. How do I stop this?

http://codepen.io/mildrenben/pen/QwVvZK

Answer 1

If you're looking in Chrome, it's because of the following default user-agent styling:

input:focus, textarea:focus,
keygen:focus, select:focus {
    outline-offset: -2px;
}

Therefore you need to set the outline-offset to 0 when focusing on the element:

Updated Example

input:focus {
  outline-offset: 0;
}