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

Posted 2023-02-22

【中文标题】如何删除 <input> 边框？ [复制]

【英文标题】：How to remove an <input> border? [duplicate]

【发布时间】：2018-03-23 07:09:32

【问题描述】：

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

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

<input>

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

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

有没有可能摆脱它？

【问题讨论】：

请不要删除 outline 属性 - a11yproject.com/posts/never-remove-css-outlines

@ovokuro：为什么？ （这是因为答案中提到的可访问性吗？）

是的，键盘用户依赖于它提供的反馈。

【参考方案1】：

input:focus 
  outline: none;

【参考方案2】：

这应该适合你

textarea:focus, input:focus
    outline: none;

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

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

【参考方案3】：

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

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

<input>

【讨论】：

谢谢，我不知道可访问性点（好的链接）。那我就一直这样下去吧。