如何删除 <input> 边框？

Question

我使用 <input> 为其设置边框样式：

input {
  font-size: 300%;
  border-width: 10px;
  border-style: solid;
  border-radius: 30px;
}

<input>

问题是一旦 <input> 获得焦点，就会出现一个蓝色的小边框：

我在 DevTools 的任何地方都没有看到它，所以我相信它是 <input> 本身的属性，它不打算有圆形边框（疯狂猜测）

可以去掉吗？

Answer 1

您可以使用 outline:none 删除它，但它会创建 accessibility issues。

input {
  font-size: 300%;
  border-width: 10px;
  border-style: solid;
  border-radius: 30px;
  outline:none;
}

<input>

Answer 2

应该适合你

textarea:focus, input:focus{
    outline: none;
}

但这在下面已经更详细了link

How to remove border (outline) around text/input boxes? (Chrome)

Answer 3

input:focus {
  outline: none;
}

How to remove an <input> border?