html - 为什么 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;
}