删除焦点文本区域上的 Firefox 发光

Posted 2023-05-07

【中文标题】删除焦点文本区域上的 Firefox 发光

【英文标题】：Remove Firefox glow on focused textarea

【发布时间】：2011-03-20 09:19:24

【问题描述】：

我想不出来这个。当 textarea 在 Firefox 中突出显示时，我正试图摆脱那种蓝色光芒。

这是我的 CSS：

textarea

    margin:0;
    padding:0;
    width: 598px;
    height: 600px;
    resize: none;
    outline: none;


:focus 
      outline:0;
      outline:none;

它在 Safari 中将其删除，但我对 Firefox 没有运气。

谢谢！ 马特

【参考方案1】：

怎么样

*:focus outline:0px none transparent;

【讨论】：

不幸的是，在现代 Firefox 版本中（在 Mac OS X 上使用 FF 21 测试）outline 根本不会影响焦点 <input> 周围的蓝色“发光”：jsbin.com/elukeq/1/edit跨度>

textarea, textarea:hover, textarea:focus, textarea:active border:none; outline:none; 更适合这种情况

【参考方案2】：

您可以使用-moz-appearance:none; 将其删除，但这可能会超出您的预期。

【讨论】：

美丽.. 谢谢！它只是在所有 textarea 上删除它，这很好。

【参考方案3】：

如果你在 textarea 样式上使用这个：

outline:none;

...它应该适用于所有浏览器，而不仅仅是 Firefox

【参考方案4】：

我很确定这是 Mac OS X 主题特有的行为。

【参考方案5】：

只需添加或定义边框...例如，如果定义了边框并且我添加了轮廓：无；对于我的 CSS，这可以解决问题。

【参考方案6】：

我认为您无法在 Firefox 中移除发光。唯一的方法是为您的元素添加自定义边框，例如 border: 1px black;，这会使输入框完全没有发光。

只有 流行 允许 outline 标签的浏览器是 Safari 和 Chrome（不确定 linux 浏览器）。

【讨论】：

IE也支持Outline。

【参考方案7】：

在#3

   #Solution0:focus
      border:solid #CCC 1px;
      outline:1px none transparent;
   

​

【参考方案8】：

在我看来，解决此问题的更好方法是定义自定义边框和:focus 行为。

textarea 
    margin:0;
    padding:0;
    width: 598px;
    height: 600px;
    resize: none;
    outline: none;
    border: none;


textarea:focus 
      outline: none;
      border: none;

【参考方案9】：

稍微不相关但可能有帮助的答案：在我的例子中，蓝色发光只是在 Firefox 中引起对齐问题，因为它增加了一个或两个额外的像素并改变了整体元素的大小。我的猜测是很多人会出于类似的原因提出这个问题，而不是完全消除蓝色光芒，我想到的解决方案是专门为 Firefox 设置输入元素填充样式：

@-moz-document url-prefix() 
    input:focus 
        padding: 5px!important;
    

您可以根据自己的需要对其进行更改，但了解@-moz-document url-prefix() 规则可能会对你们中的一些人有所帮助。

【参考方案10】：

我只是在文本输入上遇到了这个问题-Firefox 正在使用边框属性在 :focus 上创建蓝色发光 - 而不是轮廓。

input:focus, textarea:focus 
  outline: none; // for other browsers
  border: none; // only necessary if you haven't set a border on the element