html - 轮廓上的 CSS 不可移除的额外白色边框

Question

当它被聚焦时，我遇到了奇怪的输入行为。正如您通过下面的图片所看到的，无论轮廓颜色是什么，都会出现一个额外的白色边框。




我试过设置 padding: 0px;和 box-shadow: none;也是，但我仍然无法删除它。我意识到的一件事是设置 outline-style: solid;成功了，但后来我再也看不到圆 Angular 了。

下图是具有完全相同 css 规则集的相同输入元素:

input {
  flex: auto;
  border: 1px solid darkgrey;
  border-radius: 4px;
  background-color: transparent;
  color: white;
  font-size: 42px;
}

input:focus {
  outline-style: auto;
  outline-color: orange;
}

body {
  background-color: #383838;
}

<input>

Answer 1

不要使用 auto值(value)。使用 solid反而

input {
  flex: auto;
  border: 1px solid darkgrey;
  border-radius: 4px;
  background-color: transparent;
  color: white;
  font-size: 42px;
}

input:focus {
  outline-style: solid;
  outline-color: orange;
}

body {
  background-color: #383838;
}

<input>

In addition, in CSS3, outline-style accepts the value auto. The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. ^ref