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

Question

说我有输入.

HTML

<input type="text">

CSS:

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

单击时,输入会更改大小.我怎么阻止这个？

Answer 1

如果你正在浏览Chrome,那是因为以下默认的用户代理样式:

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

因此,你需要设置outline-offset到0聚焦元素时:

input:focus {
  outline-offset: 0;
}