关注输入框时删除边框[重复]

Posted 2023-02-22

【中文标题】关注输入框时删除边框[重复]

【英文标题】：remove the border when focusing on an input box [duplicate]

【发布时间】：2016-04-17 03:03:04

【问题描述】：

关于这方面还有其他事情，但似乎没有一个解决方案有效。

我正在尝试摆脱谷歌浏览器在任何输入框周围放置的浅蓝色边框。我的代码：

#alphatxt:focus 
    border: 0;
    outline:none;

它适用于按钮，但不适用于任何输入字段 它仍然没有删除边框，我已经尝试了多种不同的技术，但仍然没有任何乐趣。

这个可以吗？

谢谢

【问题讨论】：

查看此链接***.com/questions/3397113/…

Here is your code。它对我有用...

【参考方案1】：

你可以试试它会起作用的

#alphatxt:focus 
 outline: none; // removes blue outline on focus
 border: 0;  // removes border
 box-shadow: none; // removes shadow (for bootstrap etc )

【参考方案2】：

尝试做

input:focus,
#alphatxt:focus 
    outline: 0;

但是我不建议删除它，因为轮廓用于没有鼠标的人，因此他们可以使用“标签”以及视障人士。 http://www.outlinenone.com/

【参考方案3】：

您需要覆盖 outline 属性，这是浏览器的默认值：

https://jsfiddle.net/hv8s8ygn/

input:focus 
  outline: none;

【参考方案4】：

将下面的 css 放入你的 css 文件中

input[type="text"]:focus, textarea:focus 

  border: none !important;
  outline: 0 none;

【讨论】：

我不知道“大纲”定义（有时它对我有用，有时它不），但至于“边界”定义 - 这是一个非常糟糕的主意对于所有文本（和文本区域）字段，因为无论 Chrome 是什么，关注这些字段都会隐藏它们的边框，即使它是我们希望在这些字段中拥有的常规边框......