如何删除 <input> 边框？ [复制]答案

【问题标题】：How to remove an <input> border? [duplicate]如何删除 <input> 边框？ [复制]
【发布时间】：2018-03-23 07:09:32
【问题描述】：

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

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

&lt;input&gt;

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

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

有没有可能摆脱它？

【问题讨论】：

【解决方案1】：

input:focus {
  outline: none;
}

【讨论】：

【解决方案2】：

这应该适合你

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

但这已经在下面的链接中更详细了

【讨论】：

【解决方案3】：

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

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

&lt;input&gt;

【讨论】：