为什么 input[type="text"] 改变焦点大小？

Question

假设我有一个输入。

html

<input type="text">

css:

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

单击时，输入会更改大小。我该如何阻止它？

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

Answer 1

如果您正在查看 Chrome，那是因为以下默认用户代理样式：

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

因此在关注元素时需要将outline-offset设置为0:

Updated Example

input:focus {
  outline-offset: 0;
}