在 Chrome 中删除焦点颜色答案

【问题标题】：Removing a focus color in Chrome在 Chrome 中删除焦点颜色
【发布时间】：2012-03-31 09:17:29
【问题描述】：

当我的输入和 textarea 字段获得焦点时，它们会出现一种颜色：

这似乎发生在 Chrome 中，但不是 Firefox。

我尝试过用一点 jQuery 来改变颜色：

if ($('body').is('#contact')) {
        $('input').focus(function() {
            $(this).css('border', '2px solid #ce1443');
            console.log('focus');
        });

         $('textarea').focus(function() {
            $('textarea').css('border', '2px solid #ce1443');
        });
    }

但是，这似乎只会使当前边框变大......但它无法摆脱蓝色。

【问题讨论】：

可能与stackoverflow.com/questions/2943548/…重复

标签： javascript jquery css forms

【解决方案1】：

这是你可以通过 CSS 解决的问题：

input:focus {
  outline: 0 none;
}

【讨论】：

【解决方案2】：

使用outline: none CSS 属性：http://jsfiddle.net/ZnefN/。

【讨论】：

嗯...这似乎在 Chrome 中工作...但是我在 Firefox 中看到了大纲？
等等...这只是 jsfiddle 添加我认为的大纲

【解决方案3】：

在 css 中尝试：

input:focus {
    outline: none;
}

并获取所有输入和文本区域并选择框

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

另外，我认为这对this question 来说可能是多余的

【讨论】：

我认为设置 outline-width: 0 也有帮助。
很可能对 chrome 有帮助，尽管我认为 IE 将outline-width 视为一种不同的属性，并且也可能隐藏边框或文本阴影。我可能是错的，除非老板让我，否则我不会用 IE 测试，但只是一个想法。