【问题标题】:Remove Firefox glow on focused textarea删除焦点文本区域上的 Firefox 发光
【发布时间】: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 没有运气。

谢谢! 马特

【问题讨论】:

    标签: css firefox textarea


    【解决方案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
                }
                

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 2011-04-13
                  • 2010-10-30
                  • 2011-05-30
                  • 1970-01-01
                  • 1970-01-01
                  • 2011-05-10
                  • 1970-01-01
                  相关资源
                  最近更新 更多